/* =========================================================
   Atelier Tenkan — feuille de style commune
   Direction typographique : Outfit (titres) + Spectral (texte)
   Polices auto-hébergées, licence SIL Open Font License.
   Aucune dépendance externe, aucun cookie tiers.
   ========================================================= */

/* --- Police de titrage : change UNE seule ligne ci-dessous pour basculer de direction ---
   D : Gabarito.woff2  (grotesque arrondi, du caractere)
   E : Outfit.woff2    (geometrique tres rond)  <-- active
   F : Fraunces.woff2  (serif rond, voir la regle .titre-var plus bas) */
@font-face{font-family:'Titre';src:url('../fonts/Outfit.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Spectral';src:url('../fonts/Spectral-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Spectral';src:url('../fonts/Spectral-LightItalic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Spectral';src:url('../fonts/Spectral-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Spectral';src:url('../fonts/Spectral-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Spectral';src:url('../fonts/Spectral-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --papier:      #FAF8F5;
  --papier-2:    #F2EEE8;
  --encre:       #131211;
  --encre-doux:  #332F2B;
  --gris:        #5F5951;
  --gris-clair:  #948C81;
  --trait:       #E2DBD1;
  --trait-fort:  #C8BFB2;
  --sceau:       #982E22;

  --titre: 'Titre', 'Helvetica Neue', Arial, sans-serif;
  --texte: 'Spectral', Georgia, 'Times New Roman', serif;

  --page: 1080px;
  --etroit: 620px;   /* 680 avant le 19/08 : 84 signes par ligne, au-dela du confortable */
  --marge: clamp(20px,5vw,64px);
  --respire: clamp(72px,11vh,132px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--papier);
  color:var(--encre-doux);
  font-family:var(--texte);
  /* Corps de texte aligne sur celui de la lettre, valide a l'usage.
     - unite RELATIVE et non plus « 16.5px » : un visiteur qui a agrandi la police
       par defaut de son navigateur obtient enfin un texte plus grand.
     - graisse 400 et non plus 300 : Spectral Light sur fond creme donnait des
       jambages tres fins, ce qui faisait lire « trop petit » un texte surtout pale.
       Spectral-Regular.woff2 est deja chargee, le changement ne coute aucun octet. */
  font-size:1.125rem;
  line-height:1.8;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--encre); text-decoration:none; }
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{ outline:2px solid var(--encre); outline-offset:3px; }

/* ---------- Titres ---------- */
h1,h2,h3,h4{
  font-family:var(--titre);
    color:var(--encre);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.026em;
  margin:0 0 .55em;
}
h1{ font-size:clamp(1.8rem,4.7vw,3.35rem); }
h2{ font-size:clamp(1.85rem,4.2vw,2.9rem); }
h3{ font-size:clamp(1.14rem,1.9vw,1.34rem); font-weight:500; letter-spacing:-.015em; }
h4{ font-size:.95rem; font-weight:600; letter-spacing:-.01em; }

p{ margin:0 0 1.2em; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:600; color:var(--encre); }
em{ font-style:italic; }

/* ---------- Utilitaires ---------- */
.enveloppe{ width:100%; max-width:var(--page); margin:0 auto; padding-inline:var(--marge); }
.etroit{ max-width:var(--etroit); }
.section{ padding-block:var(--respire); }
.section--creux{ background:var(--papier-2); }
.section--serre{ padding-top:clamp(38px,5vw,68px); }

.surtitre{
  font-family:var(--titre);
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gris-clair); font-weight:600; margin:0 0 1.6em;
}
.chapeau{ font-size:clamp(1.12rem,2vw,1.26rem); line-height:1.62; color:var(--gris); font-weight:300; }
.filet{ border:0; border-top:1px solid var(--trait); margin:0; }
.lien{ border-bottom:1px solid var(--trait-fort); }
.lien:hover{ border-bottom-color:var(--encre); }

/* ---------- En-tête ---------- */
.entete{
  position:sticky; top:0; z-index:50;
  background:rgba(250,248,245,.93);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--trait);
}
.entete__inner{
  max-width:var(--page); margin:0 auto; padding:14px var(--marge);
  display:flex; align-items:center; gap:24px;
}
.marque{ display:flex; align-items:center; gap:13px; margin-right:auto; }
.marque img{ width:32px; height:auto; }
.marque__nom{
  font-family:var(--titre); font-weight:500;
  font-size:1rem; letter-spacing:.14em; text-transform:uppercase; color:var(--encre);
}
.nav{ display:flex; align-items:center; gap:clamp(14px,2.2vw,30px); }
.nav a,.nav span{
  font-family:var(--titre); font-size:.86rem; letter-spacing:.005em;
  color:var(--gris); padding-block:6px; border-bottom:1px solid transparent;
}
.nav a:hover{ color:var(--encre); border-bottom-color:var(--encre); }
.nav a[aria-current="page"]{ color:var(--encre); border-bottom-color:var(--encre); }
.nav span{ color:var(--trait-fort); cursor:default; }

.burger{
  display:none; background:none; border:0; padding:8px; cursor:pointer;
  font-family:var(--titre); font-size:.82rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--encre);
}
@media (max-width:860px){
  .burger{ display:block; }
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--papier); border-bottom:1px solid var(--trait);
    padding:8px var(--marge) 20px;
  }
  .nav.est-ouvert{ display:flex; }
  .nav a,.nav span{ padding:11px 0; width:100%; border-bottom:1px solid var(--trait); }
}

/* ---------- Hero ---------- */
.hero{ padding-block:clamp(32px,5vw,60px) clamp(24px,3.4vw,44px); }
.hero__titre{ margin-bottom:.4em; }

/* ---------- Cartes de services (relief sortant) ---------- */
.cartes{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px);
  align-items:stretch;
}
.carte{
  background:var(--papier); border-radius:16px;
  padding:clamp(26px,2.6vw,34px) clamp(24px,2.4vw,30px);
  box-shadow:
    0 1px 2px rgba(19,18,17,.05),
    0 10px 28px -10px rgba(19,18,17,.16),
    0 2px 8px -4px rgba(19,18,17,.08);
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.carte__num{
  font-family:var(--titre); font-size:.72rem; letter-spacing:.14em;
  color:var(--sceau); font-weight:600; display:block; margin-bottom:1.5em;
}
.carte h3{ margin-bottom:.45em; }
.carte p{ color:var(--gris); font-size:.97rem; margin:0; }
@media (max-width:880px){ .cartes{ grid-template-columns:1fr; } }

/* ---------- Chiffres (fenêtres percées dans la page) ---------- */
.chiffres{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px);
}
.chiffre{
  background:#F2F1EF; border-radius:16px; padding:36px 30px;
  text-align:center;
  box-shadow:
    inset 0 0 0 1px rgba(19,18,17,.05),
    inset 0 5px 14px rgba(19,18,17,.16),
    inset 0 2px 4px rgba(19,18,17,.12),
    inset 0 -2px 1px rgba(255,255,255,1);
}
.chiffre__valeur{
  font-family:var(--titre);
  font-size:clamp(2.2rem,4.6vw,3.1rem); font-weight:400; color:var(--encre);
  line-height:1; letter-spacing:-.04em; margin-bottom:.35em;
}
.chiffre__libelle{ font-size:.92rem; color:var(--gris); line-height:1.5; }
@media (max-width:880px){ .chiffres{ grid-template-columns:1fr; } }

/* ---------- Lettre ---------- */
.lettre{
  background:var(--papier); border:1px solid var(--trait-fort);
  padding:clamp(30px,5.5vw,72px);
  font-size:clamp(1.04rem,1.7vw,1.14rem); line-height:1.82;
  font-weight:400; color:var(--encre-doux);
}
.lettre__mention{
  font-family:var(--titre); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gris-clair); font-weight:600;
  margin-bottom:2.4em; display:block;
}
.lettre__appel{ font-style:italic; }
.alertes{ list-style:none; margin:2em 0; padding:0; }
.alertes li{ padding:.6em 0 .6em 40px; position:relative; border-bottom:1px solid var(--trait); }
.alertes li:first-child{ border-top:1px solid var(--trait); }
/* Les champignons de la version LinkedIn. Adrien y tient — ce sont les toxiques,
   et c'est le seul endroit du site qui garde une trace du ton d'origine du texte.
   Ecrits en echappement CSS (\1F344 = U+1F344) plutot qu'en caractere brut : cette
   feuille ne declare aucun encodage, un serveur qui la servirait en latin-1 casserait
   l'emoji. Le glyphe vient de la police systeme du visiteur, donc aucune requete
   exterieure : la promesse « aucun domaine tiers » tient. */
/* Centre sur la hauteur de l'alerte, pas cale sur sa premiere ligne : cinq des
   onze alertes tiennent sur deux lignes, et le champignon y pendait en haut.
   line-height:1 pour que la boite du glyphe fasse exactement sa taille, sans
   quoi le demi-interligne fausserait le centrage. */
.alertes li::before{
  content:"\1F344"; position:absolute; left:4px; top:50%;
  transform:translateY(-50%);
  font-size:1.05em; line-height:1;
}
.lettre__cle{
  font-family:var(--titre);
  font-size:clamp(1.5rem,3vw,2rem); line-height:1.24; letter-spacing:-.03em;
  color:var(--encre); margin:1.5em 0; font-weight:400;
}
.lettre__signature{
  margin-top:2.6em; padding-top:1.6em; border-top:1px solid var(--trait);
  font-size:.94rem; color:var(--gris); line-height:1.65;
}
.lettre__signature strong{ display:block; font-family:var(--titre); font-size:1.05rem; letter-spacing:-.02em; margin-bottom:.15em; }

/* ---------- Engagements / listes numérotées ---------- */
.engagements{ counter-reset:eng; list-style:none; margin:0; padding:0; }
.engagements li{ counter-increment:eng; padding:26px 0 26px 62px; border-top:1px solid var(--trait); position:relative; }
.engagements li:last-child{ border-bottom:1px solid var(--trait); }
.engagements li::before{
  content:counter(eng,decimal-leading-zero); position:absolute; left:0; top:29px;
  font-family:var(--titre); font-size:.78rem; letter-spacing:.06em; color:var(--sceau); font-weight:600;
}
.engagements h3{ margin-bottom:.28em; }
.engagements p{ color:var(--gris); font-size:.99rem; }

/* ---------- Note ---------- */
.note{ border-left:2px solid var(--encre); padding:4px 0 4px 22px; color:var(--gris); font-size:.99rem; }

/* ---------- Portes (liens de lecture obligatoire) ---------- */
.portes{ display:grid; gap:1px; background:var(--trait); border:1px solid var(--trait); margin:2.4em 0; }
.porte{ background:var(--papier); padding:28px 30px; display:block; transition:background .15s; }
.porte:hover{ background:var(--papier-2); }
.porte__num{ font-family:var(--titre); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sceau); font-weight:600; display:block; margin-bottom:.7em; }
.porte h3{ margin-bottom:.3em; }
.porte p{ color:var(--gris); font-size:.96rem; margin:0; }

/* ---------- Formulaire ---------- */
.form{ margin-top:2.4em; }
.champ{ margin-bottom:30px; }
.champ > label,.groupe__titre{
  display:block; font-family:var(--titre); font-size:.94rem; font-weight:500;
  color:var(--encre); margin-bottom:.55em; letter-spacing:-.012em;
}
.aide{ display:block; font-size:.9rem; color:var(--gris-clair); font-weight:300; margin-top:-.3em; margin-bottom:.8em; line-height:1.58; }
input[type=text],input[type=email],select,textarea{
  width:100%; font-family:var(--texte); font-size:1rem; font-weight:400; color:var(--encre);
  background:var(--papier); border:1px solid var(--trait-fort);
  padding:12px 14px; border-radius:0; appearance:none;
}
textarea{ min-height:132px; resize:vertical; line-height:1.65; }
input:focus,select:focus,textarea:focus{ border-color:var(--encre); }
.choix{ display:grid; gap:2px; }
.choix label{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--trait); font-size:.98rem; color:var(--encre-doux); cursor:pointer; }
.choix label:hover{ border-color:var(--trait-fort); }
.choix input{ margin-top:7px; flex:0 0 auto; accent-color:var(--encre); }

.serments{ border:1px solid var(--encre); padding:26px 28px; margin:34px 0; }
.serments__titre{ font-family:var(--titre); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gris-clair); font-weight:600; margin:0 0 1.4em; }
.serment{ display:flex; gap:14px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--trait); }
.serment:first-of-type{ border-top:0; padding-top:0; }
.serment input{ margin-top:7px; flex:0 0 auto; accent-color:var(--encre); }
.serment label{ font-size:.99rem; color:var(--encre); line-height:1.6; cursor:pointer; }

.bouton{
  display:inline-block; font-family:var(--titre); font-size:.88rem; letter-spacing:.1em;
  text-transform:uppercase; font-weight:600;
  background:var(--encre); color:var(--papier);
  border:1px solid var(--encre); padding:15px 32px;
  cursor:pointer; transition:background .16s,color .16s;
}
.bouton:hover{ background:transparent; color:var(--encre); }
.bouton--fantome{ background:transparent; color:var(--encre); }
/* Deux boutons cote a cote. Les libelles etant longs, ils s'empilent des qu'on
   descend en largeur : sans cette regle ils se retrouvaient decales de 10 px
   l'un par rapport a l'autre et separes de 1 px seulement. */
.bouton + .bouton{ margin-left:10px; }
@media (max-width:560px){
  .bouton + .bouton{ margin-left:0; margin-top:12px; }
  .bouton{ display:block; text-align:center; }
}
.bouton--fantome:hover{ background:var(--encre); color:var(--papier); }

/* ---------- Pied ---------- */
.pied{ border-top:1px solid var(--trait); padding-block:56px 40px; margin-top:var(--respire); }
.pied__grille{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:40px; margin-bottom:44px; }
.pied h4{ font-family:var(--titre); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gris-clair); margin-bottom:1.1em; }
.pied ul{ list-style:none; margin:0; padding:0; }
.pied li{ margin-bottom:.5em; }
.pied a{ font-size:.95rem; color:var(--gris); }
.pied a:hover{ color:var(--encre); }
.pied__bas{ border-top:1px solid var(--trait); padding-top:26px; display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; font-size:.86rem; color:var(--gris-clair); }
.pied__bas p{ margin:0; }

/* ---------- Marqueur provisoire ---------- */
.provisoire{
  border:1px dashed var(--sceau); color:var(--sceau);
  padding:14px 18px; font-size:.88rem; line-height:1.6;
  background:rgba(152,46,34,.035); margin-bottom:1.6em;
}
.provisoire strong{ color:var(--sceau); }

@media print{ .entete,.pied,.provisoire{ display:none; } }

/* ---------- Grille de tuiles (entrée par le symptôme) ---------- */
.grille{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(14px,1.6vw,20px);
}
.tuile{
  background:var(--papier); border-radius:14px; padding:24px 24px 26px;
  box-shadow:
    0 1px 2px rgba(19,18,17,.05),
    0 8px 22px -10px rgba(19,18,17,.14);
  transition:transform .16s, box-shadow .16s;
  display:block;
}
.tuile:hover{
  transform:translateY(-2px);
  box-shadow:
    0 1px 2px rgba(19,18,17,.06),
    0 14px 30px -10px rgba(19,18,17,.20);
}
.tuile h3{ font-size:1.06rem; margin-bottom:.4em; }
.tuile p{ color:var(--gris); font-size:.93rem; margin:0; line-height:1.6; }

/* ---------- Catalogue en familles ---------- */
.catalogue{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(24px,3vw,44px); align-items:start;
}
.famille{ border-top:2px solid var(--encre); padding-top:22px; }
.famille h3{
  display:flex; align-items:baseline; gap:12px;
  font-size:1.24rem; margin-bottom:1em;
}
.famille h3 em{ font-family:var(--texte); font-style:italic; font-size:.86rem; font-weight:300; color:var(--gris-clair); letter-spacing:0; }
.famille__num{ font-size:.72rem; letter-spacing:.1em; color:var(--sceau); font-weight:600; }
.famille__sous{
  font-family:var(--titre); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris-clair); font-weight:600; margin:1.6em 0 .6em;
}
.famille ul{ list-style:none; margin:0; padding:0; }
.famille li{
  font-size:.95rem; color:var(--encre-doux);
  padding:.42em 0 .42em 16px; position:relative; border-bottom:1px solid var(--trait);
}
.famille li::before{ content:""; position:absolute; left:0; top:1.05em; width:7px; height:1px; background:var(--trait-fort); }

/* ---------- Liste de conditions ---------- */
.conditions{ list-style:none; margin:1.2em 0 0; padding:0; }
.conditions li{
  padding:.7em 0 .7em 28px; position:relative; border-bottom:1px solid var(--trait);
}
.conditions li:first-child{ border-top:1px solid var(--trait); }
.conditions li::before{
  content:""; position:absolute; left:4px; top:1.35em;
  width:10px; height:1px; background:var(--sceau);
}

/* ---------- Mentions légales ---------- */
.etroit p + h2{ margin-top:1.8em; }
.etroit .surtitre + h2{ margin-top:0; }

/* ---------- Onglets ---------- */
/* Le plateau : un objet posé au-dessus du fond de la page.
   Il porte les trois onglets ET le contenu de l'onglet actif. */
.bande-plateau{
  background:var(--papier-2);
  padding-block:clamp(34px,4.8vw,68px);
  border-top:1px solid var(--trait);
}
.plateau{
  background:var(--papier); border-radius:22px;
  padding:clamp(20px,2.6vw,34px) clamp(20px,3.4vw,48px) clamp(34px,4.4vw,60px);
  box-shadow:
    0 1px 2px rgba(19,18,17,.05),
    0 18px 46px -14px rgba(19,18,17,.20),
    0 4px 14px -6px rgba(19,18,17,.09);
}
.onglets{
  display:inline-flex; gap:5px; flex-wrap:wrap;
  padding:0 0 clamp(18px,2.2vw,26px);
  border-bottom:1px solid var(--trait); width:100%;
}
.onglet{
  appearance:none; background:transparent; border:0; cursor:pointer; border-radius:13px;
  font-family:var(--titre); font-size:clamp(.94rem,1.5vw,1.06rem); font-weight:500;
  letter-spacing:-.015em; color:var(--gris-clair);
  padding:13px clamp(16px,2vw,26px);
  transition:color .16s, background .16s, box-shadow .16s;
  display:flex; align-items:baseline; gap:9px; white-space:nowrap;
}
.onglet:hover{ color:var(--encre-doux); background:rgba(19,18,17,.03); }
/* L'onglet actif s'enfonce dans le plateau : même langage que les compteurs. */
.onglet[aria-selected="true"]{
  color:var(--encre); background:#F2F1EF;
  box-shadow:
    inset 0 0 0 1px rgba(19,18,17,.05),
    inset 0 3px 9px rgba(19,18,17,.14),
    inset 0 -2px 1px rgba(255,255,255,1);
}
.onglet__num{ font-size:.68rem; letter-spacing:.12em; color:var(--sceau); font-weight:600; }
.panneau{ padding-top:clamp(30px,3.8vw,50px); }
.panneau[hidden]{ display:none; }
@media (max-width:640px){
  .plateau{ border-radius:16px; padding-inline:clamp(14px,4vw,20px); }
  .onglets{ display:flex; width:100%; }
  .onglet{ flex:1 1 auto; justify-content:center; padding-inline:10px; }
  .onglet__num{ display:none; }
}

/* ---------- Surcouche (overlay) ---------- */
body.bloque{ overflow:hidden; }
.overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(19,18,17,.42); backdrop-filter:blur(3px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(12px,3vw,44px); overflow-y:auto;
}
.overlay[hidden]{ display:none; }
.modale{
  background:var(--papier); border-radius:18px; width:100%; max-width:640px;
  padding:clamp(26px,4vw,48px); position:relative;
  box-shadow:0 30px 70px -20px rgba(19,18,17,.45), 0 4px 12px rgba(19,18,17,.14);
  margin:auto;
}
.modale h2{ font-size:clamp(1.5rem,3.2vw,2.1rem); padding-right:44px; }
.fermer{
  position:absolute; top:14px; right:14px;
  appearance:none; background:none; border:1px solid var(--trait); border-radius:50%;
  width:36px; height:36px; cursor:pointer; color:var(--gris);
  font-size:1.1rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:border-color .15s,color .15s;
}
.fermer:hover{ border-color:var(--encre); color:var(--encre); }

/* ---------- Brouillon ---------- */
.brouillon{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  background:#F2F1EF; border-radius:10px; padding:11px 15px;
  font-size:.88rem; color:var(--gris); margin-bottom:1.6em;
  box-shadow:inset 0 2px 5px rgba(19,18,17,.09);
}
.brouillon[hidden]{ display:none; }
.brouillon button{
  appearance:none; background:none; border:0; cursor:pointer; padding:0;
  font:inherit; font-size:.86rem; color:var(--encre);
  border-bottom:1px solid var(--trait-fort);
}
.brouillon button:hover{ border-bottom-color:var(--encre); }
/* Pot de miel. Un robot remplit tous les champs qu'il trouve ; une personne ne
   voit jamais celui-ci. Sorti de l'ecran plutot que « display:none », que les
   robots recents savent detecter et ignorer. Retire du parcours au clavier et
   des lecteurs d'ecran par tabindex et aria-hidden cote HTML. */
.pot{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.sauvegarde{ font-size:.84rem; color:var(--gris-clair); margin-top:1em; }

/* ---------- Marque : le trait d'encre conduit à la page Tenkan ---------- */
.marque{ align-items:center; }


/* ---------- Page Tenkan ---------- */
.hero--tenkan{ text-align:left; padding-top:clamp(44px,6vw,80px); }
.sceau{
  width:clamp(64px,8vw,96px); margin-bottom:1.8rem; opacity:.92;
}

/* ---------- Calculette ---------- */
.calculette{
  background:var(--papier); border-radius:16px; padding:clamp(24px,3.4vw,36px);
  margin-top:2.2em;
  box-shadow:0 1px 2px rgba(19,18,17,.05), 0 12px 30px -12px rgba(19,18,17,.18);
}
.calculette label{
  display:block; font-family:var(--titre); font-size:.94rem; font-weight:500;
  color:var(--encre); margin-bottom:.6em; letter-spacing:-.012em;
}
.calculette input{
  width:130px; font-family:var(--titre); font-size:1.5rem; font-weight:500;
  text-align:center; color:var(--encre); background:var(--papier);
  border:1px solid var(--trait-fort); padding:10px 12px; border-radius:10px;
}
.calculette input:focus{ border-color:var(--encre); outline:none; }
.calculette__sorties{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:1.8em;
}
.sortie{
  background:#F2F1EF; border-radius:12px; padding:20px 16px; text-align:center;
  box-shadow:
    inset 0 0 0 1px rgba(19,18,17,.05),
    inset 0 4px 10px rgba(19,18,17,.13),
    inset 0 -2px 1px rgba(255,255,255,1);
}
.sortie__val{
  font-family:var(--titre); font-size:clamp(1.5rem,3vw,2.1rem); font-weight:400;
  color:var(--encre); line-height:1; letter-spacing:-.04em; margin-bottom:.45em;
  transition:color .2s;
}
.sortie__lib{ font-size:.84rem; color:var(--gris); line-height:1.4; }
@media (max-width:620px){ .calculette__sorties{ grid-template-columns:1fr; } }

/* ---------- Titre de la page Tenkan ---------- */
.titre-tenkan{
  display:flex; align-items:center;
  gap:clamp(22px,4vw,52px); flex-wrap:nowrap;
}
.titre-tenkan .sceau{ width:clamp(74px,10vw,124px); margin:0; flex:0 0 auto; }
.titre-tenkan__bloc{ flex:1 1 auto; min-width:0; max-width:var(--etroit); }
/* « Tenkan » et le paragraphe partagent le meme bord gauche. Le titre etait
   aligne a droite jusqu'au 20/08/2026 : decision inversee par Adrien. */
.titre-tenkan h1{ margin:0 0 .55em; }
.titre-tenkan .chapeau{ margin:0; }
@media (max-width:620px){
  /* En colonne, align-items gouverne l'horizontale : rester sur flex-start,
     sinon le trait d'encre se centrerait au milieu de l'ecran en mobile. */
  .titre-tenkan{ flex-direction:column; align-items:flex-start; gap:22px; }
}

/* ---------- Champs de la calculette ---------- */
/* Les deux colonnes partagent les memes lignes : libelle, aide, champ. Sans
   cela, une aide qui se replie sur deux lignes d'un cote et une seule de
   l'autre decale les champs de saisie verticalement — c'est ce qui arrivait.
   Le subgrid fait porter l'alignement par la grille et non par la longueur du
   texte : il tient donc a toutes les largeurs. Repli prevu plus bas pour les
   navigateurs qui l'ignorent. */
.calculette__champs{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,32px);
  grid-template-rows:auto auto auto;
  margin-bottom:2em;
}
.calculette__champs .cha{
  display:grid; grid-row:span 3; grid-template-rows:subgrid; gap:0;
}
/* Repli : sans subgrid, on reserve deux lignes a l'aide pour que les champs
   restent alignes dans le cas courant. */
@supports not (grid-template-rows: subgrid){
  .calculette__champs .cha .aide{ min-height:2.9em; }
}
.cha label{
  display:block; font-family:var(--titre); font-size:.98rem; font-weight:500;
  color:var(--encre); margin-bottom:.35em; letter-spacing:-.012em;
}
.cha .aide{ margin:0 0 .9em; }
@media (max-width:620px){
  .calculette__champs{ grid-template-columns:1fr; grid-template-rows:none; }
  .calculette__champs .cha{ display:block; grid-row:auto; }
  .calculette__champs .cha .aide{ min-height:0; }
}

/* ---------- Duo texte + portrait ---------- */
.duo{
  display:grid;
  grid-template-columns:clamp(210px,25%,300px) minmax(0,1fr);
  gap:clamp(30px,4.5vw,64px);
  align-items:start;
}
.duo__image{ grid-column:1; grid-row:1; margin:0; position:sticky; top:104px; }
.duo__texte{ grid-column:2; grid-row:1; max-width:var(--etroit); }
.duo__image img{
  width:100%; height:auto; border-radius:14px; display:block;
  box-shadow:
    0 1px 2px rgba(19,18,17,.06),
    0 18px 40px -16px rgba(19,18,17,.30);
}
.duo__image figcaption{
  margin-top:.9em; font-size:.84rem; line-height:1.55; color:var(--gris-clair);
}
.duo__image figcaption sup{ font-size:.72em; }
@media (max-width:900px){
  .duo{ grid-template-columns:1fr; }
  .duo__texte{ grid-column:1; grid-row:1; }
  .duo__image{ grid-column:1; grid-row:2; position:static; max-width:260px; margin-top:1.6em; }
}

/* ---------- Cartes cliquables (accueil) ---------- */
.carte--lien{
  position:relative; padding-bottom:clamp(52px,4.4vw,62px);
  transition:transform .16s, box-shadow .16s;
  cursor:pointer;
}
.carte--lien:hover{
  transform:translateY(-3px);
  box-shadow:
    0 1px 2px rgba(19,18,17,.06),
    0 18px 38px -12px rgba(19,18,17,.24),
    0 3px 10px -4px rgba(19,18,17,.10);
}
.carte--lien:hover h3{ color:var(--sceau); }
.carte__fleche{
  position:absolute; left:50%; bottom:clamp(20px,2.2vw,26px); transform:translateX(-50%);
  font-family:var(--titre); font-size:1.1rem; color:var(--trait-fort);
  transition:color .16s, transform .16s;
}
.carte--lien:hover .carte__fleche{ color:var(--sceau); transform:translateX(-50%) translateX(4px); }
.carte--lien h3{ transition:color .16s; }