/* ============================================================================
   OMOKA — site vitrine · feuille de style de référence
   Traduction en CSS des maquettes *.dc.html et du design system OMOKA.
   Toutes les valeurs viennent des maquettes. Ne pas arrondir, ne pas inventer.
   Ordre : 1 jetons · 2 reset/base · 3 layout · 4 typo · 5 composants
           6 motifs de page · 7 responsive · 8 impression/motion
   ========================================================================== */

/* 0 — POLICES (fichiers locaux, aucune dépendance CDN) ------------------- */
@font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;
  src:url(../fonts/oswald-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;
  src:url(../fonts/oswald-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;
  src:url(../fonts/nunito-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;
  src:url(../fonts/nunito-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* 1 — JETONS ------------------------------------------------------------- */
:root{
  /* duo de marque */
  --bleu:#124e66;
  --bleu-fonce:#0e3140;
  --sable:#c7af88;

  /* surfaces */
  --fond:#edeae4;
  --surface:#fff;
  --bleu-04:#f3f7f8;
  /* valeurs opaques du design system (tokens/colors.css), celles rendues par les maquettes */
  --bleu-08:#e7eff2;
  --bleu-12:#dbe7eb;
  --bleu-surface:#e7f0f4;
  --sable-14:#f6f0e7;
  --beige-chaud:#f7f5f1;

  /* traits */
  --bordure:#d8d5cc;
  --bordure-douce:#e6e3db;
  --separateur:#f0eee8;
  --trait-clair:rgba(255,255,255,.14);

  /* encres */
  --texte:#2b3338;
  --texte-doux:#48555b;
  --texte-meta:#6b7a80;
  --texte-discret:#8a9499;
  --texte-pied-carte:#5b6b71;
  --encart-bord:#e1e9ec;
  --sur-bleu:#d6e2e7;
  --sur-bleu-clair:#e3ebee;
  --sur-bleu-discret:#aec4cb;
  --sur-sable:#e7dcc6;
  --encre-sable:#2c2110;

  /* états */
  --succes-bg:#cde5d1;  --succes-bord:#9fe1cb;  --succes-txt:#0f6e56;
  --alerte-bg:#f5d7d7;  --alerte-bord:#f7c1c1;  --alerte-txt:#a32d2d;
  --avert-bg:#f5ecd9;   --avert-bord:#ecddbf;   --avert-txt:#9a7430;
  --traiter-bg:#f6e3d3; --traiter-bord:#e8cdae; --traiter-txt:#a9713d;

  /* typo */
  --font-titre:'Oswald',sans-serif;
  --font-texte:'Nunito',sans-serif;

  /* géométrie */
  --r-petit:3px;
  --r-champ:4px;
  --r-carte:6px;
  --r-puce:6px;
  --r-outil:8px;
  --r-mod:9px;
  --r-pastille:10px;
  --r-rond:999px;
  --trait-marque:3px;

  /* ombres — toujours teintées bleu foncé, jamais noires */
  --ombre-action:0 2px 8px rgba(18,78,102,.22);   /* design system (tokens/elevation.css) */
  --ombre-carte-survol:0 8px 20px -12px rgba(18,78,102,.25);
  --ombre-panneau:0 24px 50px rgba(14,49,64,.34);
  --focus-ring:0 0 0 3px rgba(18,78,102,.10);

  /* dégradés autorisés (les seuls) */
  --degrade-bande:linear-gradient(90deg,#124e66 0%,#0e3140 100%);
  --voile-hero:linear-gradient(155deg, rgba(18,78,102,.90), rgba(14,49,64,.96));
  --voile-iso:linear-gradient(155deg, rgba(18,78,102,.93), rgba(14,49,64,.97));  /* encart ISO 27001 de l'accueil */
  --voile-tuile:linear-gradient(175deg, rgba(18,78,102,.55) 0%, rgba(14,49,64,.92) 78%);
  --degrade-rail:linear-gradient(180deg,#124e66 0%,#124e66 66%,#0e3140 100%);

  /* durées */
  --t-ligne:80ms;
  --t-ui:120ms;
  --t-carte:180ms;

  /* gabarits */
  --conteneur:1240px;
  --gouttiere:28px;
  --editorial:800px;
  --h-champ:50px;   /* design system (tokens/spacing.css), rendu des maquettes */
}

/* 2 — RESET / BASE ------------------------------------------------------- */
/* Modèle de boîte des maquettes : content-box par défaut (conteneur 1240px + gouttières),
   border-box uniquement sur les composants du design system (bouton, carte, champ). */
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--fond);
  color:var(--texte);
  font-family:var(--font-texte);
  font-size:16px;
  font-weight:400;
  line-height:normal;          /* maquettes : aucun interligne hérité, chaque bloc fixe le sien */
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
picture{display:contents}
img{display:block;height:auto}
a{color:var(--bleu);text-decoration:none}
strong,b{font-weight:700}
a:hover{color:var(--bleu-fonce)}
button{font:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-titre);font-weight:500;text-transform:uppercase;letter-spacing:.02em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
figure,blockquote{margin:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
.sur-bleu :focus-visible{outline-color:var(--sable)}

/* lien d'évitement */
.evitement{
  position:absolute;left:-9999px;top:0;z-index:50;
  background:var(--bleu);color:#fff;padding:10px 16px;border-radius:var(--r-champ);
  font-family:var(--font-titre);font-size:13px;letter-spacing:.05em;text-transform:uppercase;
}
.evitement:focus{left:12px;top:12px;color:#fff}

/* 3 — LAYOUT ------------------------------------------------------------- */
.wrap{max-width:var(--conteneur);margin:0 auto;padding-left:var(--gouttiere);padding-right:var(--gouttiere)}
.wrap--editorial{max-width:var(--editorial)}

.section{padding-top:56px}                 /* rythme sur fond beige */
.section--fin{padding-bottom:64px}
.bande{margin-top:56px}
.bande--blanc{background:var(--surface);border-top:1px solid var(--bordure);border-bottom:1px solid var(--bordure)}
.bande--blanc > .wrap{padding-top:52px;padding-bottom:52px}
.bande--bleu{background-image:var(--degrade-bande);box-shadow:inset 0 3px 0 var(--sable),inset 0 -3px 0 var(--sable);color:#fff}
.bande--bleu > .wrap{padding-top:44px;padding-bottom:40px}
.bande--texture{
  background-image:var(--voile-hero),var(--fond-texture,url(../img/omoka-fond.png));
  background-image:var(--voile-hero),var(--fond-texture,image-set(url(../img/omoka-fond.webp) type("image/webp"),url(../img/omoka-fond.png) type("image/png")));
  background-size:cover;background-position:center;color:#fff;
  box-shadow:inset 0 3px 0 var(--sable),inset 0 -3px 0 var(--sable);
}
.bande--texture > .wrap{padding-top:54px;padding-bottom:54px}

/* grilles — respecter le minmax de la maquette section par section */
.grille{display:grid;gap:16px}
.grille--255{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.grille--265{grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
.grille--290{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grille--300{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.grille--320{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.duo{display:flex;gap:44px;flex-wrap:wrap;align-items:flex-start}
.duo > *{min-width:0}
.duo--centre{align-items:center}

/* 4 — TYPOGRAPHIE -------------------------------------------------------- */
.surtitre{                                  /* « eyebrow » sable */
  font-family:var(--font-titre);font-size:13px;font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;color:var(--sable);
}
.h1-accueil{font-size:52px;line-height:1.06;text-wrap:pretty}
.h1-page{font-size:46px;line-height:1.08;text-wrap:pretty;max-width:24ch}
.h2-section{font-size:34px;line-height:1.15;color:var(--bleu);max-width:26ch}
.h2-bande{font-size:30px;line-height:1.18;color:#fff}
.h2-bande--large{font-size:36px;line-height:1.12}
.h3-section{font-size:26px;line-height:1.2;color:var(--bleu)}
.titre-carte{font-family:var(--font-titre);font-size:17px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--bleu)}
.titre-carte--sm{font-size:16px}
.meta-caps{font-family:var(--font-titre);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--texte-discret)}
.chapo{font-size:18px;line-height:1.65;color:var(--sur-bleu);max-width:58ch}
.texte-section{font-size:17px;line-height:1.7;color:var(--texte-doux);max-width:66ch}
.texte-carte{font-size:15.5px;line-height:1.7;color:var(--texte-doux)}
.texte-accroche{font-size:15px;line-height:1.65;color:var(--texte-doux)}
.mention{font-size:13.5px;line-height:1.6;color:var(--texte-meta)}
.accroche-editoriale{font-size:19px;line-height:1.65;color:var(--bleu);font-weight:300}
.chute{font-family:var(--font-titre);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--sable)}

/* titres de section : surtitre + h2 + texte */
.entete-section > .h2-section{margin-top:12px}
.entete-section > .texte-section{margin-top:14px}

/* liste à puces sable */
.puces{display:grid;gap:8px}
.puces > li{display:flex;gap:9px;align-items:baseline;font-size:15.5px;line-height:1.6;color:var(--texte-doux)}
.puces > li::before{
  content:"\f111";font-family:"Font Awesome 6 Pro";font-weight:900;
  font-size:6px;color:var(--sable);position:relative;top:-3px;flex:0 0 auto;
}
.sur-bleu .puces > li{color:var(--sur-bleu)}

/* citation à filet sable */
.filet-sable{border-left:var(--trait-marque) solid var(--sable);padding-left:18px}
.encart{background:var(--bleu-04);border:1px solid var(--encart-bord);border-radius:var(--r-carte);padding:12px 14px;font-size:14.5px;line-height:1.6;color:var(--bleu)}
.encart--bleu{background:rgba(255,255,255,.06);border:none;border-left:var(--trait-marque) solid var(--sable);border-radius:0;padding:14px 16px;font-size:15px;color:var(--sur-sable)}

/* 5 — COMPOSANTS --------------------------------------------------------- */

/* 5.1 Bouton */
/* enveloppe bloc : reproduit le <a style="display:block"> des maquettes (hauteur de ligne sous le bouton) */
.btn-bloc{display:block}
.btn{
  display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-texte);cursor:pointer;text-decoration:none;border:none;
  white-space:nowrap;
  transition:filter var(--t-ui) ease,transform var(--t-ui) ease,background-color var(--t-ui) ease;
}
.btn--compact{height:36px;padding:0 11px;border-radius:var(--r-mod);font-size:12px;font-weight:800}
.btn--plein{
  height:52px;padding:0 20px;border-radius:var(--r-champ);font-size:14px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;width:100%;   /* rendu DS : --taille-corps-lg 14px, --lettrage-bouton .14em */
}
.btn--primaire{background:var(--bleu);color:#fff;box-shadow:var(--ombre-action)}
.btn--sable{background:var(--sable);color:var(--encre-sable)}
.btn--outline{background:var(--surface);color:var(--bleu);border:1px solid var(--bordure);font-weight:600}
.btn--ghost{background:transparent;color:var(--bleu);font-weight:700}
.btn--primaire:hover,.btn--sable:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn--primaire:hover{color:#fff}
.btn--sable:hover{color:var(--encre-sable)}
.btn--outline:hover{background:var(--separateur);color:var(--bleu)}
.btn--ghost:hover{background:var(--bleu-04);color:var(--bleu)}
.btn[disabled],.btn--desactive{
  background:var(--bordure);color:var(--texte-discret);cursor:not-allowed;
  box-shadow:none;filter:none;transform:none;
}
.btn > i{font-size:13px}
.btn .compteur{
  margin-left:auto;height:18px;padding:0 5px;border-radius:var(--r-rond);
  background:rgba(255,255,255,.25);font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.btn--outline .compteur,.btn--ghost .compteur{background:var(--bleu-08)}
/* largeurs fixes reprises des maquettes */
.btn-w240{width:240px}
.btn-w300{width:300px}
.btn-w345{width:345px}
.btn-w220{width:220px}

/* bouton-outil (36px, icône seule) */
.btn-outil{
  display:flex;box-sizing:border-box;align-items:center;justify-content:center;width:36px;height:36px;
  border:none;background:transparent;border-radius:var(--r-outil);
  color:var(--texte-doux);font-size:15px;cursor:pointer;flex-shrink:0;
  transition:background-color var(--t-ui) ease,color var(--t-ui) ease;
}
.btn-outil:hover{background:var(--bleu-04);color:var(--bleu)}

/* 5.2 Carte */
.carte{
  display:flex;box-sizing:border-box;flex-direction:column;background:var(--surface);
  border:1px solid var(--bordure);border-radius:var(--r-carte);
  padding:22px;color:inherit;text-decoration:none;
}
.carte--p0{padding:0}
.carte--p18{padding:18px}
.carte--p20{padding:20px}
.carte--p24{padding:24px}
.carte--p26{padding:26px}
.carte--survolable{
  cursor:pointer;
  transition:box-shadow var(--t-carte) ease,transform var(--t-carte) ease,border-color var(--t-carte) ease;
}
.carte--survolable:hover{border-color:var(--bleu);transform:translateY(-2px);box-shadow:var(--ombre-carte-survol)}
.carte--survolable.carte--sable:hover{border-color:var(--sable)}

/* lignes de définition dans une carte (certificat, tarifs) */
.ligne-def{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--separateur);font-size:13.5px}
.ligne-def > :first-child{color:var(--texte-meta)}
.ligne-def > :last-child{font-weight:700}
dl,dd{margin:0}
.pied-carte{padding:12px 16px;background:var(--bleu-04);border-top:1px solid var(--bordure-douce);font-size:13px;line-height:1.6;color:var(--texte-pied-carte)}

/* 5.3 Pastille d'icône */
.pastille{display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pastille--sm{width:24px;height:24px;border-radius:var(--r-puce)}
.pastille--sm > i{font-size:12.5px}
.pastille--md{width:32px;height:32px;border-radius:var(--r-outil)}
.pastille--md > i{font-size:14px}
.pastille--lg{width:38px;height:38px;border-radius:var(--r-pastille)}
.pastille--lg > i{font-size:18px}
.pastille--bleu{background:var(--bleu-08);color:var(--bleu)}
.pastille--bleu-plein{background:var(--bleu);color:#fff}
.pastille--bleu-surface{background:var(--bleu-surface);color:var(--bleu)}
.pastille--beige{background:var(--fond);color:var(--texte-doux)}
.pastille--sable{background:var(--sable-14);color:var(--sable)}

/* en-tête de carte : pastille + titre */
.entete-carte{display:flex;align-items:center;gap:11px}

/* 5.4 Badge */
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:1px 7px;
  border-radius:var(--r-petit);border:1px solid transparent;
  font-family:var(--font-texte);font-size:11px;font-weight:700;line-height:1.5;white-space:nowrap;
}
.badge__point{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.badge > i{font-size:9px}
.badge--succes{background:var(--succes-bg);border-color:var(--succes-bord);color:var(--succes-txt)}
.badge--alerte{background:var(--alerte-bg);border-color:var(--alerte-bord);color:var(--alerte-txt)}
.badge--avertissement{background:var(--avert-bg);border-color:var(--avert-bord);color:var(--avert-txt)}
.badge--traiter{background:var(--traiter-bg);border-color:var(--traiter-bord);color:var(--traiter-txt)}
.badge--info{background:var(--bleu-08);border-color:var(--bleu-12);color:var(--bleu)}
.badge--neutre{background:var(--fond);border-color:var(--bordure);color:var(--texte-doux)}

/* 5.5 Champ de formulaire */
.champ{margin-bottom:20px}
.champ__label{display:block;font-family:var(--font-texte);font-weight:600;font-size:13px;color:var(--texte-doux);margin-bottom:8px}
.champ__requis{color:var(--sable)}
.champ__boite{position:relative}
.champ__icone{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  color:var(--texte-discret);font-size:14px;pointer-events:none;
}
.champ input,.champ textarea,.champ select{
  box-sizing:border-box;width:100%;-webkit-appearance:none;appearance:none;height:var(--h-champ);padding:0 16px;
  border:1px solid var(--bordure);border-radius:var(--r-champ);
  background:var(--surface);font-family:var(--font-texte);font-size:15px;color:var(--texte);
  outline:none;transition:border-color var(--t-ui) ease,box-shadow var(--t-ui) ease;
}
.champ--avec-icone input{padding-left:42px}
.champ textarea{height:auto;min-height:120px;padding:12px 16px;line-height:1.6;resize:vertical}
.champ input::placeholder,.champ textarea::placeholder{color:var(--texte-discret)}
.champ input:focus,.champ textarea:focus,.champ select:focus{border-color:var(--bleu);box-shadow:var(--focus-ring)}
.champ__aide{margin-top:6px;font-size:13px;color:var(--texte-meta)}
.champ--erreur input,.champ--erreur textarea{border-color:var(--alerte-txt)}
.champ__erreur{margin-top:6px;font-size:13px;font-weight:700;color:var(--alerte-txt)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 6 — MOTIFS DE PAGE ----------------------------------------------------- */

/* 6.1 En-tête collant */
.en-tete{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--bordure)}
.en-tete__inner{
  max-width:var(--conteneur);margin:0 auto;padding:13px var(--gouttiere);
  display:flex;align-items:center;gap:14px 26px;
}
.en-tete__logo{height:26px;width:auto;flex:0 0 auto}
.nav{
  display:flex;flex-wrap:wrap;gap:10px 20px;margin-left:auto;
  font-family:var(--font-titre);font-size:13.5px;font-weight:400;
  letter-spacing:.04em;text-transform:uppercase;
}
.nav a{color:var(--bleu);padding-bottom:3px}
.nav a:hover{color:var(--bleu-fonce)}
.nav a[aria-current="page"]{box-shadow:0 3px 0 var(--sable)}
.nav-bascule{display:none}
.nav-mobile{display:none}

/* 6.2 Hero de page intérieure */
.hero-page{
  background-image:var(--voile-hero),var(--fond-texture,url(../img/omoka-fond.png));
  background-image:var(--voile-hero),var(--fond-texture,image-set(url(../img/omoka-fond.webp) type("image/webp"),url(../img/omoka-fond.png) type("image/png")));
  background-size:cover;background-position:center;
  box-shadow:inset 0 -3px 0 var(--sable);color:#fff;
}
.hero-page--erp{background-image:var(--voile-hero),url(../img/erp-fond.png);background-image:var(--voile-hero),image-set(url(../img/erp-fond.webp) type("image/webp"),url(../img/erp-fond.png) type("image/png"))}
.hero-page--solution{background-image:var(--voile-hero),url(../img/solution-fond.png);background-image:var(--voile-hero),image-set(url(../img/solution-fond.webp) type("image/webp"),url(../img/solution-fond.png) type("image/png"))}
.hero-page__inner{max-width:var(--conteneur);margin:0 auto;padding:52px var(--gouttiere) 46px}
.hero-page .h1-page{margin-top:14px}
.hero-page .chapo{margin-top:18px}
.ligne-meta{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--trait-clair);
  display:flex;gap:16px;flex-wrap:wrap;
  font-family:var(--font-titre);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--sur-bleu-discret);
}
.ligne-meta a{color:var(--sur-bleu-discret)}
.ligne-meta a:hover{color:#fff}

/* 6.3 Hero d'accueil (2 colonnes) */
.hero-accueil{
  background-image:var(--voile-hero),url(../img/omoka-fond.png);
  background-image:var(--voile-hero),image-set(url(../img/omoka-fond.webp) type("image/webp"),url(../img/omoka-fond.png) type("image/png"));
  background-size:cover;background-position:center;
  box-shadow:inset 0 -3px 0 var(--sable);color:#fff;
}
.hero-accueil__inner{
  max-width:var(--conteneur);margin:0 auto;padding:58px var(--gouttiere) 54px;
  display:flex;gap:44px;flex-wrap:wrap;align-items:center;
}
.hero-accueil__col{flex:1 1 440px;min-width:0}
.hero-accueil .chapo{margin-top:20px;font-size:18px;max-width:52ch}
.actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}

/* 6.4 Accroche éditoriale centrée */
.accroche{background:var(--surface);border-bottom:1px solid var(--bordure)}
.accroche__inner{max-width:var(--editorial);margin:0 auto;padding:34px var(--gouttiere);text-align:center}
.accroche .chute{margin-top:12px}

/* 6.5 Frise d'échéances (bandeau bleu) */
.frise{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:0 24px;margin-top:28px}
.frise__col{position:relative;padding:32px 0 22px;border-top:2px solid var(--sable);min-width:0}
.frise__point{position:absolute;top:-8px;left:0;width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 4px var(--trait-clair)}
.frise__chiffre{font-family:var(--font-titre);font-size:28px;font-weight:500;line-height:1;color:#fff}
.frise__libelle{font-family:var(--font-titre);font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--sable)}
.frise__detail{margin-top:9px;display:flex;gap:8px;align-items:baseline;font-size:14.5px;line-height:1.55;color:var(--sur-bleu)}
.frise__detail i{font-size:12px;color:var(--sur-bleu-discret);position:relative;top:1px}

/* 6.6 Tuile photo 4/5 */
.tuile{position:relative;aspect-ratio:4/5;border-radius:var(--r-carte);overflow:hidden;box-shadow:inset 0 -3px 0 var(--sable);min-width:0}
.tuile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.6)}
.tuile__voile{position:absolute;inset:0;background-image:var(--voile-tuile)}
.tuile__texte{position:absolute;left:0;right:0;bottom:0;padding:20px}
.tuile__titre{font-family:var(--font-titre);font-weight:500;font-size:22px;letter-spacing:.03em;text-transform:uppercase;color:#fff}
.tuile__legende{margin-top:7px;font-size:15px;line-height:1.6;color:var(--sur-bleu-clair)}

/* 6.7 Bloc CTA démonstration */
.cta{
  background-image:var(--degrade-bande);border-radius:var(--r-carte);
  box-shadow:inset 0 -3px 0 var(--sable);padding:36px 32px;
  display:flex;gap:28px;flex-wrap:wrap;align-items:center;justify-content:space-between;color:#fff;
}
.cta__texte{flex:1 1 420px;min-width:0}
.cta__texte p{margin-top:11px;font-size:16.5px;line-height:1.65;color:var(--sur-bleu);max-width:54ch}

/* 6.8 Pied */
.pied{background-image:var(--degrade-bande)}
.pied__inner{
  max-width:var(--conteneur);margin:0 auto;padding:26px var(--gouttiere);
  display:flex;gap:22px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  font-family:var(--font-titre);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--sur-bleu-discret);
}
.pied__logo{height:20px;width:auto}
.pied__liens{display:flex;gap:18px;flex-wrap:wrap}
.pied a{color:var(--sur-bleu-discret)}
.pied a:hover{color:#fff}

/* 6.9 Tableau (Certifications) */
.tableau{background:var(--surface);border:1px solid var(--bordure);border-radius:var(--r-carte);overflow:hidden}
.tableau th{
  text-align:left;padding:11px 14px;background:var(--bleu-04);border-bottom:1px solid var(--bordure);
  font-family:var(--font-titre);font-size:12.5px;font-weight:400;letter-spacing:.05em;text-transform:uppercase;color:var(--bleu);
}
.tableau td{padding:11px 14px;border-bottom:1px solid var(--separateur);font-size:15px;line-height:1.6;color:var(--texte-doux);vertical-align:top}
.tableau tr:last-child td{border-bottom:none}
.tableau tbody tr{transition:background-color var(--t-ligne) ease}
.tableau tbody tr:hover{background:#d7e6f3}

/* 6.10 FAQ (details/summary) */
.faq{display:grid;gap:12px;max-width:900px;margin-top:24px}
.faq details{background:var(--surface);border:1px solid var(--bordure);border-radius:var(--r-carte);padding:18px}
.faq summary{
  display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;
  font-family:var(--font-titre);font-size:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--bleu);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{margin-left:auto;font-size:11px;color:var(--sable);transition:transform var(--t-ui) ease}
.faq details[open] summary i{transform:rotate(180deg)}
.faq details > p{margin-top:9px;font-size:15.5px;line-height:1.7;color:var(--texte-doux)}

/* 6.11 Utilitaires de ton (couleur d'état) */
.ton-alerte{color:var(--alerte-txt)}
.ton-traiter{color:var(--traiter-txt)}
.ton-avertissement{color:var(--avert-txt)}
.ton-succes{color:var(--succes-txt)}
.fond-alerte{background:var(--alerte-txt)}
.fond-traiter{background:var(--traiter-txt)}
.fond-avertissement{background:var(--avert-txt)}
.fond-succes{background:var(--succes-txt)}

/* 6.12 En-têtes de section — variantes */
.h2-section--libre{max-width:none}
.h2-section--24{max-width:24ch}
.entete-ligne{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-end;justify-content:space-between}
.en-tete__marque{display:block;flex:0 0 auto}

/* 6.13 Accueil — hero */
.hero-accueil .h1-accueil{margin-top:16px}
.h1-accueil__accent{color:var(--sable)}
.ligne-meta--accueil{margin-top:28px;padding-top:20px;gap:18px}

/* 6.14 Accueil — schéma du tableau de bord (HTML/CSS, données fictives) */
.schema{display:flex;min-height:0;background:var(--surface);border-radius:var(--r-carte);overflow:hidden;box-shadow:var(--ombre-panneau);color:var(--texte)}
.schema__rail{flex:0 0 46px;display:flex;flex-direction:column;gap:7px;padding:9px 7px;background-image:var(--degrade-rail);box-shadow:inset -3px 0 0 var(--sable)}
.schema__rail-logo{display:flex;align-items:center;justify-content:center;padding:2px 0 4px}
.schema__rail-logo img{width:30px;height:auto;flex:0 0 auto}
.schema__rail-items{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.schema__rail-item{height:26px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-puce)}
.schema__rail-item > i{font-size:13px;color:var(--sur-bleu-discret)}
.schema__rail-item--actif{background:var(--trait-clair);box-shadow:inset -2px 0 0 var(--sable)}
.schema__rail-item--actif > i{color:var(--sable)}
.schema__contenu{flex:1 1 auto;min-width:0;background:var(--fond)}
.schema__barre{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--bordure)}
.schema__fil{font-family:var(--font-titre);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--bleu)}
.schema__outils{margin-left:auto;display:flex;align-items:center;gap:7px}
.schema__recherche{width:96px;height:18px;display:flex;align-items:center;gap:5px;padding:0 7px;border:1px solid var(--bordure);border-radius:var(--r-mod)}
.schema__recherche > i{font-size:8px;color:var(--texte-discret)}
.schema__recherche > span{font-size:9px;color:var(--texte-discret)}
.schema__avatar{width:18px;height:18px;border-radius:50%;background:var(--sable)}
.schema__onglets{display:flex;gap:14px;padding:0 12px;background:var(--surface);border-bottom:1px solid var(--bordure)}
.schema__onglet{padding:7px 0;font-family:var(--font-titre);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--texte-discret)}
.schema__onglet--actif{color:var(--bleu);box-shadow:inset 0 -2px 0 var(--bleu)}
.schema__corps{display:flex;gap:10px;align-items:flex-start;padding:10px}
.schema__carte{background:var(--surface);border:1px solid var(--bordure);border-radius:var(--r-carte)}
.schema__journee{flex:1 1 auto;min-width:0}
.schema__carte-titre{display:flex;align-items:center;gap:7px;padding:9px 10px;border-bottom:1px solid var(--separateur)}
.schema__carte-titre > i{font-size:10px;color:var(--sable)}
.schema__carte-titre > span{font-family:var(--font-titre);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--bleu)}
.schema__filtres{display:flex;gap:12px;flex-wrap:wrap;padding:8px 10px 0}
.schema__filtre{display:flex;align-items:center;gap:5px;padding-bottom:5px}
.schema__filtre > i{font-size:5px}
.schema__filtre--actif{box-shadow:0 2px 0 var(--bleu)}
.schema__filtre-libelle{font-family:var(--font-titre);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--texte-discret)}
.schema__filtre--actif .schema__filtre-libelle{color:var(--bleu)}
.schema__nombre{padding:0 4px;border-radius:8px;background:var(--separateur);font-size:9px;font-weight:700;color:var(--texte-meta)}
.schema__groupe{display:flex;align-items:center;gap:7px;margin-top:4px;padding:5px 10px;background:var(--beige-chaud);border-top:1px solid var(--separateur);border-bottom:1px solid var(--separateur)}
.schema__groupe-carre{width:7px;height:7px;border-radius:2px;background:var(--sable)}
.schema__groupe-libelle{font-family:var(--font-titre);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--texte-doux)}
.schema__groupe-detail{font-size:9px;color:var(--texte-discret)}
.schema__tache{display:flex;align-items:center;gap:9px;padding:8px 10px;border-bottom:1px solid var(--separateur)}
.schema__tache-trait{width:3px;height:18px;border-radius:2px;flex:0 0 auto}
.schema__tache-icone{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:5px;background:var(--bleu-surface)}
.schema__tache-icone > i{font-size:10px;color:var(--bleu)}
.schema__tache-libelle{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;color:var(--texte)}
.schema__tache-module{flex:0 0 auto;font-family:var(--font-titre);font-size:9px;letter-spacing:.05em;color:var(--texte-discret)}
.schema__tache-avatar{width:16px;height:16px;flex:0 0 auto;border-radius:50%;background:var(--bordure-douce)}
.schema__retard{flex:0 0 auto;padding:1px 5px;border:1px solid transparent;border-radius:var(--r-petit);font-size:9.5px;font-weight:700;white-space:nowrap}
.schema__retard--avertissement{background:var(--avert-bg);border-color:var(--avert-bord);color:var(--avert-txt)}
.schema__retard--alerte{background:var(--alerte-bg);border-color:var(--alerte-bord);color:var(--alerte-txt)}
.schema__pied{padding:7px 10px;text-align:center;font-family:var(--font-titre);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--texte-discret)}
.schema__cote{flex:0 0 132px;display:flex;flex-direction:column;gap:8px}
.schema__kpi{padding:9px}
.schema__kpi-titre{font-family:var(--font-titre);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--texte-discret)}
.schema__kpi-valeur{display:flex;align-items:baseline;gap:5px;margin-top:5px}
.schema__kpi-nombre{font-family:var(--font-titre);font-size:26px;font-weight:500;line-height:1;color:var(--alerte-txt)}
.schema__kpi-texte{font-size:10px;color:var(--texte-doux)}
.schema__compteurs{display:flex;gap:5px;margin-top:8px}
.schema__compteur{flex:1 1 0;min-width:0;padding:7px 8px;border-radius:var(--r-champ)}
.schema__compteur-nombre{font-family:var(--font-titre);font-size:15px;font-weight:500}
.schema__compteur-libelle{font-family:var(--font-titre);font-size:8.5px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.schema__compteur--traiter{background:var(--traiter-bg);color:var(--traiter-txt)}
.schema__compteur--avertissement{background:var(--avert-bg);color:var(--avert-txt)}
.schema__compteur--succes{background:var(--succes-bg);color:var(--succes-txt)}
.schema__actions-titre{display:flex;align-items:center;gap:6px}
.schema__actions-titre > i{font-size:10px;color:var(--bleu)}
.schema__actions-titre > span{font-family:var(--font-titre);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--bleu)}
.schema__vide{margin-top:10px;text-align:center;font-size:9.5px;line-height:1.5;color:var(--texte-discret)}
.schema__legende{margin-top:10px;font-family:var(--font-titre);font-size:11px;line-height:1.5;letter-spacing:.05em;text-transform:uppercase;color:var(--sur-bleu-discret)}

/* 6.15 Accueil — OMOKA, c'est quoi ? */
.quoi{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start;margin-top:26px}
.quoi__cartes{flex:1 1 560px;min-width:0;display:grid;gap:16px}
.quoi__intro{margin-top:13px}
.quoi__puces{margin-top:12px}
.quoi__encart{margin-top:15px}
.quoi__titre{margin-top:13px}
.quoi__texte{margin-top:11px}
.quoi__visuel{flex:0 1 300px;min-width:0;display:flex;justify-content:center}
.quoi__visuel img{width:100%;max-width:300px}

/* 6.16 Accueil — modules */
.modules{margin-top:24px}
.modules__titre{margin-top:13px}
.modules__accroche{margin-top:6px}

/* 6.17 Accueil — frise */
.frise-entete{display:flex;gap:20px;flex-wrap:wrap;align-items:baseline;justify-content:space-between}
.frise-entete__titre{line-height:1.15}
.frise-entete__texte{font-size:15.5px;line-height:1.6;color:var(--sur-bleu);max-width:46ch}
.frise__tete{display:flex;align-items:baseline;gap:8px}

/* 6.18 Accueil — pourquoi OMOKA */
.raisons{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:32px;margin-top:28px}
.raisons__texte{margin-top:12px}
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:16px;margin-top:36px}
.petit-plus{max-width:820px;margin-top:32px}
.petit-plus__texte{margin-top:9px;font-size:17px;line-height:1.65;color:var(--bleu)}

/* 6.19 Accueil — ISO/IEC 27001 + certificat de l'éditeur */
.bande--iso{
  background-image:var(--voile-iso),url(../img/solution-fond.png);
  background-image:var(--voile-iso),image-set(url(../img/solution-fond.webp) type("image/webp"),url(../img/solution-fond.png) type("image/png"));
  background-size:cover;background-position:center;color:#fff;
  box-shadow:inset 0 3px 0 var(--sable),inset 0 -3px 0 var(--sable);
}
.bande--iso > .wrap{padding-top:54px;padding-bottom:54px}
.iso{display:flex;gap:44px;flex-wrap:wrap;align-items:flex-start}
.iso__texte{flex:1 1 470px;min-width:0;color:#fff}
.iso__titre{margin-top:12px;text-wrap:pretty}
.iso__chapo{margin-top:16px;font-size:17.5px;line-height:1.68;color:var(--sur-bleu);max-width:56ch}
.iso__puces{margin-top:20px;gap:9px}
.puces--bande > li{gap:10px;color:var(--sur-bleu)}
.iso__avertissement{margin-top:24px}
.iso__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.iso__cibles{
  margin-top:24px;padding-top:20px;border-top:1px solid var(--trait-clair);
  font-family:var(--font-titre);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--sur-bleu-discret);
}
.iso__certificat{flex:0 1 340px;min-width:0;color:var(--texte)}
.certificat{overflow:hidden;border-radius:var(--r-carte);box-shadow:inset -3px 0 0 var(--sable)}
.certificat__entete{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--bordure-douce)}
.certificat__titre{font-size:13px;font-weight:400;letter-spacing:.04em;color:var(--bleu)}
.certificat__lignes{display:flex;flex-direction:column;padding:4px 16px 12px}
.certificat__etat{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0 2px}
.certificat__etat > dt{font-size:13.5px;color:var(--texte-meta)}
.certificat__etat > dd{display:flex}

/* 6.20 Accueil — nos clients */
.clients-entete{margin-bottom:24px}
.client__logo{height:45px;width:auto;align-self:flex-start}
.client__meta{margin-top:14px}
.client__meta--appel{margin-top:6px}
.client__texte{margin-top:10px}
.client__appel{font-size:21px;font-weight:400;letter-spacing:.03em;color:var(--bleu)}
.client__action{margin-top:14px}

/* 6.21 Pages intérieures — motifs communs */
.visuellement-masque{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.grille--340{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:20px}
.puces--aere > li{line-height:1.7}
.carte-icone__titre{margin-top:13px}
.carte-icone__texte{margin-top:9px}
.carte-icone__pied{margin-top:12px;font-family:var(--font-titre);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--sable)}
.carte-icone__pied--petit{font-size:12px}
.legende{margin-top:12px;font-size:14px;line-height:1.6;color:var(--texte-meta)}
.media{display:flex;flex-wrap:wrap;align-items:center}
.media__texte,.media__visuel{min-width:0}
.media__visuel{display:flex;justify-content:center}
.visuel-iphone{width:100%;height:auto}
.encart-filet{padding:14px 16px;border-left:var(--trait-marque) solid var(--sable);background:var(--bleu-04);font-size:15.5px;line-height:1.65;color:var(--bleu)}

/* bloc de fin de page à filet sable (La solution, Nos clients) */
.fin-page{padding-top:56px;padding-bottom:72px}
.fin-page__inner{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding-top:34px;border-top:2px solid var(--sable)}
.fin-page__texte{flex:1 1 480px;min-width:0}
.fin-page__titre{font-size:32px;line-height:1.15;color:var(--bleu)}
.fin-page__chapo{margin-top:13px;font-size:17px;line-height:1.7;color:var(--texte-doux);max-width:62ch}
.fin-page__actions{flex:0 1 340px;min-width:0;display:grid;gap:10px;justify-items:stretch}

/* 6.22 La solution */
.intro-bande{background:var(--surface);border-bottom:1px solid var(--bordure)}
.intro-bande__inner{
  max-width:var(--conteneur);margin:0 auto;padding:40px var(--gouttiere);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;
}
.titre-module{font-size:21px;letter-spacing:.03em;color:var(--bleu)}
.module__accroche{margin-top:12px;font-size:16px;line-height:1.6;color:var(--bleu)}
.module__details{margin-top:13px;padding-top:13px;border-top:1px solid var(--separateur)}
.capture{overflow:hidden;background:var(--surface);border:1px solid var(--bordure);border-radius:var(--r-carte)}
.capture img{width:100%}
.media--solution{gap:36px;margin-top:34px}
.media--solution > .media__texte{flex:1 1 420px}
.media--solution > .media__visuel{flex:0 1 280px}
.media--solution .visuel-iphone{max-width:280px}

/* 6.23 Mon ERP QSE */
.media--erp{gap:40px}
.media--erp > .media__texte{flex:1 1 440px}
.media--erp > .media__visuel{flex:0 1 290px}
.media--erp .visuel-iphone{max-width:290px}
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.etape{min-width:0;padding-top:22px;border-top:2px solid var(--sable)}
.etape__tete{display:flex;align-items:center;gap:10px}
.etape__numero{font-family:var(--font-titre);font-size:26px;font-weight:500;line-height:1;color:var(--sable)}
.etape__tete > i{font-size:15px;color:var(--bleu)}

/* 6.24 Certifications */
.referentiel{display:block;width:100%;border-collapse:separate;border-spacing:0}
.referentiel > caption{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--bordure-douce);text-align:left}
.referentiel > tbody{display:block}
.referentiel__nom{font-family:var(--font-titre);font-size:22px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:var(--bleu)}
.referentiel__sous-titre{font-size:14.5px;color:var(--texte-meta)}
.referentiel__ligne{display:flex;gap:16px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--separateur)}
.referentiel__ligne:last-child{border-bottom:none}
.referentiel__exigence{flex:0 0 220px;min-width:0;padding:0;text-align:left;font-family:var(--font-titre);font-size:13px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--bleu)}
.referentiel__module{flex:1 1 300px;min-width:0;padding:0;font-size:15px;line-height:1.6;color:var(--texte-doux)}
.editeur{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start}
.editeur__texte{flex:1 1 440px;min-width:0}
.editeur__certificat{flex:0 1 340px;min-width:0}
.certificat-logo{display:block;width:100%;max-width:260px;height:auto;margin:0 auto}

/* 6.25 Tarifs */
.formule{overflow:hidden;border-radius:var(--r-carte)}
.formule--avant{box-shadow:inset 0 -3px 0 var(--sable)}
.formule__tete{padding:22px 24px;border-bottom:1px solid var(--separateur)}
.formule--avant .formule__tete{background:var(--bleu-04);border-bottom-color:var(--encart-bord)}
.formule__ligne-nom{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.formule__nom{font-size:20px;letter-spacing:.04em;color:var(--bleu)}
.formule__prix{display:flex;align-items:baseline;gap:8px;margin-top:16px}
.formule__montant{font-family:var(--font-titre);font-size:46px;font-weight:500;line-height:1;color:var(--bleu)}
.formule__periode{font-family:var(--font-titre);font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--texte-discret)}
.formule__note{margin-top:10px;font-size:15px;line-height:1.6;color:var(--texte-doux)}
.formule__corps{display:grid;gap:8px;padding:18px 24px 22px}
.faq__question{font-size:16px;font-weight:400;letter-spacing:.04em;color:var(--bleu)}

/* 6.26 Nos clients */
.reference__logo{height:50px;width:auto;align-self:flex-start}
.reference__modules{margin-top:16px;padding-top:14px;border-top:1px solid var(--separateur)}
.verbatim{display:flex;flex-direction:column;margin:0}
.verbatim > i{font-size:16px;color:var(--sable)}
.verbatim__texte{margin:12px 0 0}
.verbatim__texte > p{font-size:17px;line-height:1.7;color:var(--bleu)}

/* 6.27 Documentation */
.recherche-doc{max-width:620px}
.guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px}
.guide{display:flex;align-items:center;gap:12px;padding:13px 14px;background:var(--surface);border:1px solid var(--bordure);border-radius:var(--r-carte)}
.guide__texte{flex:1 1 auto;min-width:0}
.guide__titre{font-size:14px;font-weight:400;letter-spacing:.04em;color:var(--bleu)}
.guide__accroche{font-size:13.5px;line-height:1.5;color:var(--texte-meta)}
.guide__chevron{font-size:10px;color:var(--sable)}

/* 6.29 Contact */
.contact{display:flex;gap:32px;flex-wrap:wrap;align-items:flex-start}
.contact__formulaire{flex:1 1 520px;min-width:0}
.contact__infos{flex:1 1 300px;min-width:0;display:grid;gap:16px;align-content:start}
.formulaire__titre{font-size:20px;letter-spacing:.04em;color:var(--bleu)}
.formulaire__intro{margin:10px 0 20px;font-size:15.5px;line-height:1.7;color:var(--texte-doux)}
.formulaire__legende{display:block;padding:0;font-family:var(--font-titre);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--texte-doux)}
/* type de demande (ajout production, non maquetté) */
.choix-demande{min-width:0;margin:0 0 20px;padding:0;border:0}
.choix-demande__options{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.choix-demande__option{
  flex:1 1 210px;box-sizing:border-box;min-height:44px;padding:0 14px;display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--bordure);border-radius:var(--r-champ);cursor:pointer;
  font-size:14.5px;font-weight:600;line-height:1.4;color:var(--texte-doux);
  transition:border-color var(--t-ui) ease,background-color var(--t-ui) ease,color var(--t-ui) ease;
}
.choix-demande__option:hover{border-color:var(--bleu)}
.choix-demande__option:has(input:checked){background:var(--bleu-04);border-color:var(--bleu);color:var(--bleu)}
.choix-demande__option:has(input:focus-visible){outline:2px solid var(--bleu);outline-offset:2px}
.choix-demande__option > input{flex:0 0 auto;width:16px;height:16px;margin:0;accent-color:var(--bleu)}
.formulaire__champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.formulaire__large{grid-column:1/-1}
/* champs propres à la démonstration : masqués pour les autres types de demande */
.formulaire:not([data-demande="demonstration"]) .formulaire__demo{display:none}
.formulaire__message{margin-top:16px}
.formulaire__zone{
  display:block;box-sizing:border-box;width:100%;min-height:120px;margin-top:7px;padding:12px 14px;resize:vertical;
  background:var(--surface);border:1px solid var(--bordure);border-radius:var(--r-champ);outline:none;
  font-family:var(--font-texte);font-size:15px;line-height:1.6;color:var(--texte);
  transition:border-color var(--t-ui) ease,box-shadow var(--t-ui) ease;
}
.formulaire__zone::placeholder{color:var(--texte-discret)}
.formulaire__zone:focus{border-color:var(--bleu);box-shadow:var(--focus-ring)}
.formulaire__zone[aria-invalid="true"]{border-color:var(--alerte-txt)}
.formulaire__aide{margin-top:8px;font-size:13.5px;line-height:1.6;color:var(--texte-meta)}
.formulaire__erreur{margin-top:18px;padding:12px 14px;background:var(--alerte-bg);border:1px solid var(--alerte-bord);border-radius:var(--r-champ);font-size:14.5px;font-weight:600;line-height:1.6;color:var(--alerte-txt)}
.formulaire__actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:18px}
.formulaire__mention{font-size:13.5px;line-height:1.6;color:var(--texte-meta);max-width:36ch}
.coordonnees{display:grid;gap:12px;margin-top:14px}
.coordonnees__item{display:flex;gap:11px;align-items:flex-start}
.coordonnees__item > i{margin-top:3px;font-size:14px;color:var(--sable)}
.coordonnees__libelle{font-family:var(--font-titre);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--texte-discret)}
.coordonnees__valeur{font-size:15px;line-height:1.6;color:var(--texte)}
.deroule > .wrap{padding-bottom:44px}
.deroule__titre{font-size:28px;line-height:1.15;color:#fff}
.deroule__etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;margin-top:26px}
.deroule__etape{min-width:0;padding-top:20px;border-top:2px solid var(--sable)}
.deroule__numero{font-family:var(--font-titre);font-size:24px;font-weight:500;line-height:1;color:var(--sable)}
.deroule__nom{margin-top:10px;font-size:15px;font-weight:400;letter-spacing:.04em;color:#fff}
.deroule__texte{margin-top:8px;font-size:15px;line-height:1.6;color:var(--sur-bleu)}
.espace-pied{height:64px}

/* lien en pied de carte à icône (Documentation › Assistance) — bleu pour le contraste */
.carte-icone__lien{
  align-self:flex-start;min-height:44px;display:inline-flex;align-items:center;margin-top:2px;
  font-family:var(--font-titre);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--bleu);
}
.carte-icone__lien:hover{color:var(--bleu-fonce)}

/* 6.30 Merci */
.merci{max-width:760px}
.merci__etapes{display:grid;gap:16px}
.merci__etape{display:flex;gap:14px;align-items:baseline}
.merci__actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:26px}

/* 6.31 Pages légales et 404 (non maquettées : typographie des cartes) */
.prose{max-width:760px}
.section > .carte:has(> .prose){max-width:860px}
.prose > * + *{margin-top:12px}
.prose h2{margin-top:30px;font-size:20px;letter-spacing:.04em;color:var(--bleu)}
.prose h2:first-child{margin-top:0}
.prose p{font-size:15.5px;line-height:1.7;color:var(--texte-doux)}
.prose a{text-decoration:underline;text-underline-offset:2px}
.prose__bloc{padding:14px 16px;background:var(--bleu-04);border:1px solid var(--encart-bord);border-radius:var(--r-carte)}
.formulaire__mention a{text-decoration:underline;text-underline-offset:2px}
.lien-carte{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.lien-carte > i{font-size:11px;color:var(--sable)}
.pied__mention a{color:var(--sur-bleu-discret)}

/* 6.32 Documentation — rubriques, articles, recherche (pages non maquettées, motifs existants) */
.fil-ariane ol{display:flex;flex-wrap:wrap}
.fil-ariane li + li::before{content:"›";margin:0 8px;color:var(--sur-bleu-discret)}
.fil-ariane a{color:var(--sable)}
.fil-ariane a:hover{color:#fff}
.guides > li{display:flex;min-width:0}
.guides > li > .guide{flex:1 1 auto;min-width:0}
.guide__compte{margin-top:4px;font-family:var(--font-titre);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--texte-doux)}
.guide--lien{color:inherit;transition:box-shadow var(--t-carte) ease,transform var(--t-carte) ease,border-color var(--t-carte) ease}
.guide--lien:hover{color:inherit;border-color:var(--bleu);transform:translateY(-2px);box-shadow:var(--ombre-carte-survol)}
.guide--vide .guide__titre{color:var(--texte-meta)}
.doc-resultats{margin-top:4px}
.doc-article{display:flex;gap:32px;flex-wrap:wrap;align-items:flex-start}
.doc-article__principal{flex:1 1 640px;min-width:0}
.doc-article__cote{flex:1 1 300px;max-width:360px;min-width:0;display:grid;gap:16px;position:sticky;top:84px}
.doc-sommaire{display:grid;gap:2px;margin-top:12px}
.doc-sommaire a{
  display:flex;gap:10px;align-items:baseline;padding:10px 10px;border-radius:var(--r-champ);
  font-size:14.5px;line-height:1.45;color:var(--texte-doux);transition:background-color var(--t-ligne) ease;
}
.doc-sommaire a > i{flex:0 0 16px;font-size:12px;color:var(--sable);text-align:center}
.doc-sommaire a:hover{background:var(--bleu-04);color:var(--bleu)}
.doc-sommaire a[aria-current="page"]{background:var(--bleu-surface);color:var(--bleu);font-weight:700}

/* contenu rédigé dans Nivano, nettoyé (inc/documentation.php) */
.doc-contenu{max-width:78ch}
.doc-contenu > * + *{margin-top:14px}
.doc-contenu p,.doc-contenu li{font-size:15.5px;line-height:1.7;color:var(--texte-doux)}
.doc-contenu strong{color:var(--texte)}
.doc-contenu h2{margin-top:32px;font-size:20px;line-height:1.25;letter-spacing:.04em;color:var(--bleu)}
.doc-contenu h3{margin-top:24px;font-size:16px;line-height:1.3;letter-spacing:.04em;color:var(--bleu)}
.doc-contenu > :first-child{margin-top:0}
.doc-contenu ul{padding-left:22px;list-style:disc}
.doc-contenu ol{padding-left:22px;list-style:decimal}
.doc-contenu li + li{margin-top:4px}
.doc-contenu li::marker{color:var(--sable)}
.doc-contenu hr{height:0;margin:26px 0;border:0;border-top:1px solid var(--bordure-douce)}
.doc-contenu figure{margin:18px 0}
.doc-contenu img{display:block;max-width:100%;height:auto;margin:18px auto;border:1px solid var(--bordure);border-radius:var(--r-carte)}
.doc-contenu figure img{margin:0 auto}
.doc-contenu a{text-decoration:underline;text-underline-offset:2px}
.doc-encart{padding:14px 18px;background:var(--bleu-04);border:1px solid var(--encart-bord);border-radius:var(--r-carte)}
.doc-contenu .doc-encart,.doc-encart .doc-accent{color:var(--bleu)}
.doc-accent{color:var(--avert-txt)}
.doc-suite{display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;margin-top:30px;padding-top:20px;border-top:1px solid var(--separateur)}
.doc-suite__lien{
  flex:1 1 240px;display:flex;align-items:center;gap:12px;padding:12px 14px;
  border:1px solid var(--bordure);border-radius:var(--r-carte);font-size:15px;line-height:1.4;color:var(--bleu);
  transition:border-color var(--t-ui) ease,background-color var(--t-ui) ease;
}
.doc-suite__lien:hover{border-color:var(--bleu);background:var(--bleu-04)}
.doc-suite__lien--suivant{justify-content:flex-end;margin-left:auto;text-align:right}
.doc-suite__lien > i{font-size:13px;color:var(--sable)}
.doc-suite__sens{display:block;font-family:var(--font-titre);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--texte-doux)}
@media (max-width:1079.98px){
  .doc-article__cote{max-width:none;position:static}
}

/* 6.33 Contact — le déroulé de la démonstration se prolonge jusqu'au pied : plus de bande beige
   coincée entre deux aplats bleus, le filet sable marque seul la séparation. */
.deroule--soude > .wrap{padding-bottom:40px}

/* 6.28 Marges verticales (valeurs des maquettes) — en dernier pour primer sur les blocs */
.mt-6{margin-top:6px}
.mt-9{margin-top:9px}
.mt-10{margin-top:10px}
.mt-11{margin-top:11px}
.mt-12{margin-top:12px}
.mt-13{margin-top:13px}
.mt-14{margin-top:14px}
.mt-16{margin-top:16px}
.mt-18{margin-top:18px}
.mt-20{margin-top:20px}
.mt-22{margin-top:22px}
.mt-24{margin-top:24px}
.mt-26{margin-top:26px}
.mt-28{margin-top:28px}
.mt-32{margin-top:32px}

/* 7 — RESPONSIVE --------------------------------------------------------- */
/* Zones tactiles ≥ 44px sans changer le dessin : bouton compact (36px) et bouton-outil (36px) */
.btn--compact,.btn-outil{position:relative}
.btn--compact::after,.btn-outil::after{content:"";position:absolute;inset:-4px}

/* Navigation mobile — la nav desktop maquettée tient sur une ligne à partir de ~1060px
   (mesuré) : bascule en dessous de 1080px plutôt qu'à 1024px (brief §8.1). */
@media (max-width:1079.98px){
  .nav{display:none}
  .en-tete__action{display:none}
  .nav-bascule{display:flex;margin-left:auto;color:var(--bleu)}
  .nav-mobile{
    display:block;position:absolute;top:100%;left:0;right:0;
    max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;
    background:var(--surface);border-bottom:1px solid var(--bordure);
    visibility:hidden;opacity:0;transform:translateY(-4px);
    transition:opacity var(--t-ui) ease,transform var(--t-ui) ease,visibility 0s linear var(--t-ui);
  }
  .nav-mobile[data-ouvert="true"]{visibility:visible;opacity:1;transform:none;transition:opacity var(--t-ui) ease,transform var(--t-ui) ease,visibility 0s}
  .nav-mobile > a{
    display:flex;align-items:center;min-height:44px;padding:0 var(--gouttiere);
    font-family:var(--font-titre);font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--bleu);
    border-bottom:1px solid var(--separateur);
  }
  .nav-mobile > a[aria-current="page"]{text-decoration:underline 3px var(--sable);text-underline-offset:7px}
  .nav-mobile .btn-bloc{margin:16px var(--gouttiere)}
  .pied__liens a,.pied__mention a{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:768px){
  :root{--gouttiere:20px}
  .h1-accueil{font-size:36px}
  .h1-page{font-size:34px}
  .h2-section{font-size:26px}
  .h2-bande,.h2-bande--large{font-size:24px}
  .h3-section{font-size:22px}
  .chapo{font-size:16.5px}
  .texte-section{font-size:16px}
  .duo{gap:28px}
  .section{padding-top:40px}
  .bande{margin-top:40px}
  .bande--blanc > .wrap,.bande--texture > .wrap{padding-top:36px;padding-bottom:36px}
  .hero-accueil__inner{padding:36px var(--gouttiere)}
  .hero-page__inner{padding:36px var(--gouttiere) 32px}
  .cta{padding:26px 22px}
  /* tableau en cartes empilées */
  .tableau thead{display:none}
  .tableau,.tableau tbody,.tableau tr,.tableau td{display:block;width:100%}
  .tableau tr{border-bottom:1px solid var(--bordure);padding:6px 0}
  .tableau td{border:none;padding:6px 14px}
  .tableau td::before{
    content:attr(data-label);display:block;margin-bottom:3px;
    font-family:var(--font-titre);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--texte-discret);
  }
}
@media (max-width:480px){
  .btn-w240,.btn-w300,.btn-w345,.btn-w220{width:100%}
  .actions > *{width:100%}
  .tuile{aspect-ratio:3/4}
}

/* 8 — MOTION & IMPRESSION ------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
@media print{
  .en-tete,.nav-mobile,.cta,.pied{display:none}
  body{background:#fff}
  .bande--bleu,.bande--texture,.hero-page,.hero-accueil{background:#fff !important;color:#000 !important;box-shadow:none}
}