/* ============================================================
   Accueil — porté de maquettes/home-clair-suisse.html.

   La maquette fait autorité : toute divergence est un défaut ici,
   pas une amélioration. Les écarts volontaires sont listés dans
   SESSION_06.md.

   MOBILE D'ABORD. La maquette est un export de canevas 1440 px sans
   aucune requête média ; ses marges de 64 px et ses grilles de 3 ou 4
   colonnes rendaient la page inutilisable sous 900 px. Les règles de
   base ci-dessous décrivent donc le téléphone, et les grilles se
   reconstituent aux paliers 768 px puis 1100 px.
   ============================================================ */

/* Les jetons vivent dans charte.css, partages avec toutes les
   pages. Seule la marge laterale, propre a cette mise en page,
   reste ici. */
:root{--marge:22px}

*{box-sizing:border-box}
body.accueil{
  margin:0;background:var(--fond-3);color:var(--bleu);
  font:400 17px/1.55 'Source Sans 3',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.accueil a{color:var(--bleu)}
body.accueil a:hover{color:var(--bleu-fonce)}
.page{max-width:1440px;margin:0 auto;background:var(--fond)}
.bloc{padding:52px var(--marge)}
.mono{font-family:'IBM Plex Mono',monospace}
.serif{font-family:'Source Serif 4',Georgia,serif;font-weight:300}
.num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px}

/* ---------- en-tete ---------- */
.entete{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px var(--marge);border-bottom:1px solid var(--trait)}
.entete .marque{font:700 18px/1 'Source Sans 3',sans-serif;letter-spacing:.06em;text-decoration:none}
.entete .baseline{font:400 13px/1.3 'IBM Plex Mono',monospace;color:var(--doux)}
.entete nav{display:flex;gap:16px;flex-wrap:wrap;width:100%;order:3;
  padding-top:10px;border-top:1px solid var(--trait);margin-top:4px}
.navl{font:400 16px/1.5 'Source Sans 3',sans-serif;text-decoration:none;color:rgba(23,50,79,.85)}
.navl:hover{color:var(--bleu)}
.entete .agir{margin-left:auto;display:flex;gap:12px;align-items:center}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1fr}
.hero .dire{padding:44px var(--marge) 40px;display:flex;flex-direction:column;justify-content:center}
.hero .surtitre{font:500 13px/1.6 'IBM Plex Mono',monospace;color:var(--accent);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px}
.hero h1{font:300 34px/1.15 'Source Serif 4',Georgia,serif;margin:0 0 20px;max-width:20ch}
.hero p{margin:0;font:400 18px/1.5 'Source Sans 3',sans-serif;color:rgba(23,50,79,.8);max-width:46ch}
.hero .liens{display:flex;gap:20px;flex-wrap:wrap;margin-top:28px;align-items:center}
.hero .image{position:relative;overflow:hidden;min-height:230px;background:var(--fond-3)}

/* ---------- calculatrice ---------- */
.calc-zone{padding:0 var(--marge);margin-top:-28px;position:relative;z-index:2}
.calc{background:#fff;border:1px solid var(--trait);padding:24px 20px 22px;
  box-shadow:0 18px 44px rgba(23,50,79,.10)}
.calc .titre{display:flex;flex-direction:column;gap:4px;margin-bottom:20px}
.calc h2{margin:0;font:600 21px/1.3 'Source Sans 3',sans-serif}
.calc .promesse{font:400 15px/1.4 'IBM Plex Mono',monospace;color:var(--doux)}
.calc .champs{display:grid;grid-template-columns:1fr;gap:16px}
.calc label{display:block;font:600 13px/1 'Source Sans 3',sans-serif;
  letter-spacing:.05em;text-transform:uppercase;color:var(--doux);margin-bottom:7px}
.fld{width:100%;min-height:52px;padding:0 14px;border:1px solid var(--trait-fort);
  background:var(--fond-2);color:var(--bleu);border-radius:2px;
  font:400 17px/1.4 'Source Sans 3',sans-serif;transition:border-color .18s,background .18s}
.fld:hover{border-color:var(--trait-fort)}
.fld:focus{outline:none;border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 3px rgba(193,87,30,.14)}
input.fld{font-variant-numeric:tabular-nums lining-nums}
.cta{min-height:52px;padding:0 26px;border:0;background:var(--accent);color:#fff;
  font:600 16px/1 'Source Sans 3',sans-serif;border-radius:2px;cursor:pointer;
  transition:background .18s,transform .12s;width:100%}
.cta:hover{background:var(--accent-fonce)}
.cta:active{transform:translateY(1px)}
.calc .apres{margin-top:16px;font:400 15px/1.5 'Source Sans 3',sans-serif;color:var(--doux)}

/* ---------- bandeau de mesures ---------- */
.mesures{padding:22px var(--marge) 0}
.mesures .ligne{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--trait);
  font:400 15px/1.5 'IBM Plex Mono',monospace;color:var(--doux)}
.mesures b{color:var(--bleu);font-weight:500}
.mesures .attente{color:var(--accent)}

/* ---------- sections ---------- */
.tete{margin-bottom:26px}
.tete .surtitre{font:500 13px/1.6 'IBM Plex Mono',monospace;color:var(--accent);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.tete h2{margin:0;font:300 30px/1.15 'Source Serif 4',Georgia,serif}
.tete p{margin:12px 0 0;font:400 17px/1.6 'Source Sans 3',sans-serif;
  color:rgba(23,50,79,.8);max-width:60ch}

/* ---------- cartes d'affaires ---------- */
.stg{display:grid;grid-template-columns:1fr;gap:20px}
.card{background:#fff;border:1px solid var(--trait);padding:24px 22px 22px;
  transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(23,50,79,.10)}
.card .chiffres{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin-bottom:18px}
.card .cle{display:block;font:500 13px/1.6 'IBM Plex Mono',monospace;
  color:var(--doux);letter-spacing:.04em}
.card .val{display:block;font:600 26px/1 'Source Sans 3',sans-serif;
  font-variant-numeric:tabular-nums lining-nums;margin-top:4px}
.card .val.principal{font-size:31px}
.card .unite{font:400 15px/1 'Source Sans 3',sans-serif;color:var(--doux)}
.card h3{margin:0;font:600 20px/1.3 'Source Sans 3',sans-serif;
  padding-top:16px;border-top:1px solid var(--trait)}
.card .lieu{display:block;margin-top:6px;font:400 16px/1.5 'Source Sans 3',sans-serif;color:var(--doux)}
.card .pied{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--trait);
  font:400 13.5px/1.4 'IBM Plex Mono',monospace;color:var(--doux)}
.card .ref{font-variant-numeric:tabular-nums lining-nums}
/* Le tiret des donnees inconnues : element assume, pas un trou. */
.inconnu{color:rgba(23,50,79,.42);border-bottom:1px dotted rgba(23,50,79,.35);cursor:help}
.etiquette{display:inline-block;font:600 13px/1 'Source Sans 3',sans-serif;
  letter-spacing:.05em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--accent);padding:4px 8px;border-radius:2px;margin-bottom:16px}

/* ---------- comparaison ---------- */
.compare{display:grid;grid-template-columns:1fr;gap:0}
.compare > div{padding:24px 0}
.compare .nous{background:#fff;border:1px solid var(--trait);padding:24px 22px;margin-top:16px}
.compare h3{margin:0 0 16px;font:600 18px/1.35 'Source Sans 3',sans-serif}
.compare ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.compare li{font:400 17px/1.5 'Source Sans 3',sans-serif;padding-left:26px;position:relative}
.compare li::before{position:absolute;left:0;top:0;font-family:'IBM Plex Mono',monospace}
.compare .eux li::before{content:"×";color:var(--doux)}
.compare .nous li::before{content:"→";color:var(--accent)}
.compare .aparte{font:400 15px/1.4 'IBM Plex Mono',monospace;color:var(--doux)}

/* ---------- parcours ---------- */
.etapes{display:grid;grid-template-columns:1fr;gap:18px}
.etape{background:var(--fond-2);border:1px solid var(--trait);padding:22px}
.etape .rang{font:500 15px/1 'IBM Plex Mono',monospace;color:var(--accent);
  display:block;margin-bottom:12px}
.etape h3{margin:0 0 8px;font:600 20px/1.3 'Source Sans 3',sans-serif}
.etape p{margin:0;font:400 17px/1.55 'Source Sans 3',sans-serif;color:rgba(23,50,79,.8)}

/* ---------- bande de commission ---------- */
.commission{display:grid;grid-template-columns:1fr;gap:18px;
  padding:40px var(--marge);background:var(--bleu);color:#fff;text-align:center}
.commission a,.commission b{color:#fff}
.commission .grand{font:300 30px/1.2 'Source Serif 4',Georgia,serif}
.commission .petit{font:400 17px/1.6 'Source Sans 3',sans-serif;color:rgba(255,255,255,.82)}

/* ---------- interlocuteur et avis ---------- */
.duo{display:grid;grid-template-columns:1fr;gap:28px}
.duo p{margin:0 0 16px;font:400 21px/1.5 'Source Serif 4',Georgia,serif;max-width:52ch}
.duo .secondaire{font:400 17px/1.6 'Source Sans 3',sans-serif;color:rgba(23,50,79,.8)}
.avis{background:var(--fond-2);border:1px solid var(--trait);padding:24px 22px}
.avis h3{margin:0 0 16px;font:600 18px/1.35 'Source Sans 3',sans-serif}
.avis .attente{display:grid;gap:12px;margin-bottom:16px}
.avis .attente span{display:block;border:1px dashed var(--trait-fort);padding:16px;
  font:400 13.5px/1.4 'IBM Plex Mono',monospace;color:var(--doux);text-align:center}
.avis .honnete{margin:0;font:400 16px/1.55 'Source Sans 3',sans-serif;color:rgba(23,50,79,.8)}

/* ---------- pied ---------- */
.pied{padding:40px var(--marge) 34px;border-top:1px solid var(--trait)}
.pied .cols{display:grid;grid-template-columns:1fr;gap:26px}
.pied h4{margin:0 0 12px;font:600 13px/1 'Source Sans 3',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;color:var(--doux)}
.pied .liste{display:grid;gap:9px}
.dirl{font:400 17px/1.4 'Source Sans 3',sans-serif;text-decoration:none;color:rgba(23,50,79,.85)}
.dirl:hover{color:var(--bleu)}
.pied .bas{display:flex;flex-direction:column;gap:14px;margin-top:30px;
  padding-top:18px;border-top:1px solid var(--trait);
  font:400 13px/1.6 'IBM Plex Mono',monospace;color:var(--doux)}

/* ============================================================
   Paliers. Au-dessus de 768 px la page retrouve ses grilles ; au-dessus
   de 1100 px, les marges et l'echelle typographique de la maquette.
   ============================================================ */
@media (min-width:768px){
  :root{--marge:38px}
  .bloc{padding:64px var(--marge)}
  .entete nav{width:auto;order:0;padding-top:0;border-top:0;margin-top:0;gap:20px}
  .hero h1{font-size:46px}
  .hero .image{min-height:320px}
  .calc .champs{grid-template-columns:1fr 1fr}
  .cta{width:auto}
  .calc .champs .action{grid-column:1 / -1}
  .stg{grid-template-columns:repeat(2,1fr);gap:24px}
  .compare{grid-template-columns:1fr 1fr;gap:0}
  .compare .nous{margin-top:0;margin-left:-1px}
  .etapes{grid-template-columns:repeat(2,1fr);gap:22px}
  .commission{grid-template-columns:1fr auto 1fr;text-align:left;align-items:center;gap:36px}
  .duo{grid-template-columns:1.2fr 1fr;gap:44px}
  .pied .cols{grid-template-columns:1.3fr 1fr 1fr}
  .pied .bas{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:44px}
  .mesures .ligne{flex-wrap:nowrap}
}
@media (min-width:1100px){
  :root{--marge:64px}
  .bloc{padding:72px var(--marge)}
  .hero{grid-template-columns:1fr 640px}
  .hero .dire{padding:84px 56px 92px var(--marge)}
  .hero h1{font-size:60px;line-height:1.12}
  .hero .image{min-height:0}
  .calc-zone{margin-top:-56px}
  .calc{padding:34px 38px 32px}
  /* La promesse remonte sur la ligne du titre, a droite — position de
     la maquette. Sous ce palier elle repasse dessous, faute de place. */
  .calc .titre{flex-direction:row;justify-content:space-between;
    align-items:baseline;gap:24px}
  .calc .champs{grid-template-columns:1fr 1fr 1fr 280px;gap:20px;align-items:end}
  .calc .champs .action{grid-column:auto}
  .stg{grid-template-columns:repeat(3,1fr);gap:26px}
  .etapes{grid-template-columns:repeat(4,1fr);gap:26px}
  .tete h2{font-size:40px}
  .pied .cols{grid-template-columns:1.3fr 1fr 1fr 1fr}
}
@keyframes fu{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes panel{from{transform:translateY(28px) scale(.99);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.a1{animation:fu .6s cubic-bezier(.2,.75,.25,1) both}
.a2{animation:fu .6s cubic-bezier(.2,.75,.25,1) .14s both}
.a3{animation:panel .72s cubic-bezier(.2,.75,.25,1) .3s both}
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .75s cubic-bezier(.2,.75,.25,1),transform .75s cubic-bezier(.2,.75,.25,1)}
.js [data-reveal].in{opacity:1;transform:none}
.stg > *{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.75,.25,1),transform .6s cubic-bezier(.2,.75,.25,1)}
.js [data-reveal].in .stg > *{opacity:1;transform:none}
.js [data-reveal].in .stg > *:nth-child(2){transition-delay:.09s}
.js [data-reveal].in .stg > *:nth-child(3){transition-delay:.18s}
.js [data-reveal].in .stg > *:nth-child(4){transition-delay:.27s}
.js [data-reveal].in .stg > *:nth-child(5){transition-delay:.36s}
.draw{transform:scaleX(0);transform-origin:left center;transition:transform .95s cubic-bezier(.2,.75,.25,1) .1s}
.js [data-reveal].in .draw{transform:scaleX(1)}
.fld{width:100%;box-sizing:border-box;appearance:none;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1.5 L7 7.5 L13 1.5' fill='none' stroke='%2317324f' stroke-width='2'/></svg>") no-repeat right 16px center;border:1px solid rgba(23,50,79,.24);border-radius:4px;padding:16px 46px 16px 16px;font:400 17px/1.15 'Source Sans 3',sans-serif;color:#17324f;transition:border-color .18s,box-shadow .18s;outline:none;cursor:pointer}
.fld:hover{border-color:rgba(23,50,79,.5)}
.fld:focus{border-color:#17324f;box-shadow:0 0 0 3px rgba(23,50,79,.16)}
.cta{transition:background .2s,box-shadow .2s,transform .12s}
.cta:hover{background:#a8481a;box-shadow:0 10px 26px rgba(193,87,30,.3)}
.cta:active{transform:translateY(1px)}
.gbtn{transition:background .18s,border-color .18s,color .18s}
.gbtn:hover{background:#17324f;border-color:#17324f;color:#fff}
.card{transition:transform .24s cubic-bezier(.2,.75,.25,1),box-shadow .24s,border-color .24s}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(15,35,56,.14);border-color:rgba(23,50,79,.3)}
.navl{transition:border-color .18s}
.navl:hover{border-color:#c1571e}
.dirl{transition:color .18s}
.dirl:hover{color:#a8481a}
.stripes{background-image:repeating-linear-gradient(135deg,rgba(23,50,79,.11) 0 2px,transparent 2px 10px)}
@media (prefers-reduced-motion:reduce){.js [data-reveal],.stg > *{opacity:1 !important;transform:none !important;transition:none}.a1,.a2,.a3{animation:none}.draw{transform:none}}


/* Sans JavaScript, aucun element ne reste masque : le masquage n'existe
   que sous « .js », classe posee par reveal.js. Une page dont le
   contenu depend d'un script est une page qui disparait quand le script
   ne charge pas. */
[data-reveal]{opacity:1;transform:none}
.js [data-reveal]{opacity:0}
.js [data-reveal].in{opacity:1}