/* =========================================================
   FILATEK — feuille de style commune
   Indice A — 2026
   Modifier ce fichier met à jour toutes les pages du site.
   ========================================================= */

:root{
  --encre:#10243b;
  --encre-clair:#1b3555;
  --teal:#2f9e8f;
  --teal-fonce:#25806f;
  --papier:#eef1f4;
  --blanc:#ffffff;
  --trait:#c3ccd6;
  --trait-clair:rgba(255,255,255,.16);
  --gris:#56687a;

  --display:"Archivo",system-ui,sans-serif;
  --corps:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --marge:clamp(20px,5vw,64px);
  --largeur:1160px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--corps);
  font-size:17px;
  line-height:1.65;
  color:var(--encre);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
main{flex:1}
img{max-width:100%;display:block}
a{color:inherit}

.enveloppe{max-width:var(--largeur);margin:0 auto;padding:0 var(--marge)}

/* ---------- Typographie ---------- */
.titre-page,.titre-folio,.titre-carte{
  font-family:var(--display);
  font-variation-settings:"wdth" 118;
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.015em;
}
.titre-page{font-size:clamp(2.1rem,5vw,3.7rem);text-wrap:balance}
.titre-folio{font-size:clamp(1.55rem,3vw,2.2rem);margin-bottom:.6em}
.titre-carte{font-size:1.12rem;font-variation-settings:"wdth" 112;letter-spacing:0}

.reperage{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--teal-fonce);
}

/* ---------- Règle de colonnes ---------- */
.regle{display:flex;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.regle span{
  flex:1;
  font-family:var(--mono);
  font-size:.66rem;
  color:var(--gris);
  padding:3px 0 3px 6px;
  border-right:1px solid var(--trait);
}
.regle span:last-child{border-right:0}
.regle--sombre{border-color:var(--trait-clair)}
.regle--sombre span{color:rgba(255,255,255,.42);border-color:var(--trait-clair)}

/* ---------- Barre de navigation ---------- */
.barre{
  position:sticky;top:0;z-index:50;
  background:rgba(238,241,244,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--trait);
}
.barre-interieur{display:flex;align-items:center;gap:28px;height:62px}
.marque{
  font-family:var(--display);
  font-variation-settings:"wdth" 122;
  font-weight:700;
  font-size:1.16rem;
  letter-spacing:.06em;
  text-decoration:none;
  flex-shrink:0;
}
.marque em{font-style:normal;color:var(--teal-fonce)}
.liens{display:flex;gap:24px;margin-left:auto}
.liens a{
  font-size:.9rem;text-decoration:none;color:var(--gris);
  padding:4px 0;border-bottom:1px solid transparent;transition:.18s;white-space:nowrap;
}
.liens a:hover{color:var(--encre);border-bottom-color:var(--teal)}
.liens a[aria-current="page"]{color:var(--encre);border-bottom-color:var(--teal)}

.bouton{
  display:inline-block;
  font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;
  text-decoration:none;padding:11px 20px;
  background:var(--teal);color:#04201c;
  border:1px solid var(--teal);
  transition:.18s;white-space:nowrap;
}
.bouton:hover{background:var(--teal-fonce);border-color:var(--teal-fonce);color:#fff}
.bouton--vide{background:transparent;color:var(--blanc);border-color:var(--trait-clair)}
.bouton--vide:hover{background:rgba(255,255,255,.08);color:var(--blanc);border-color:rgba(255,255,255,.5)}
.bouton--sombre{background:transparent;color:var(--encre);border-color:var(--encre)}
.bouton--sombre:hover{background:var(--encre);color:var(--papier);border-color:var(--encre)}

/* ---------- Sections ---------- */
.folio{padding:clamp(54px,7vw,94px) 0;border-top:1px solid var(--trait)}
.folio--sombre{background:var(--encre);color:var(--papier);border-top-color:var(--encre)}
.folio--sombre .titre-folio,.folio--sombre .titre-carte{color:var(--blanc)}
.folio--sombre .reperage{color:var(--teal)}
.entete-folio{margin-bottom:clamp(28px,4vw,44px)}
.chapeau{max-width:60ch;color:var(--gris);font-size:1.03rem}
.folio--sombre .chapeau{color:rgba(238,241,244,.75)}

/* ---------- Bandeau de tête (pages intérieures) ---------- */
.tete{
  background:
    repeating-linear-gradient(to right,rgba(255,255,255,.04) 0 1px,transparent 1px 68px),
    linear-gradient(168deg,var(--encre-clair),var(--encre) 66%);
  color:var(--papier);
}
.tete-corps{padding:clamp(44px,6vw,78px) 0 clamp(38px,5vw,58px)}
.tete .titre-page{color:var(--blanc);max-width:20ch;margin:16px 0 20px}
.tete .titre-page span{color:var(--teal)}
.tete-texte{max-width:56ch;color:rgba(238,241,244,.8);font-size:1.06rem}

/* ---------- Accueil ---------- */
.hero{
  background:
    repeating-linear-gradient(to right,rgba(255,255,255,.045) 0 1px,transparent 1px 68px),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.045) 0 1px,transparent 1px 68px),
    linear-gradient(168deg,var(--encre-clair),var(--encre) 62%);
  color:var(--papier);
}
.hero-corps{padding:clamp(60px,9vw,116px) 0 clamp(44px,6vw,70px)}
.hero .titre-page{color:var(--blanc);max-width:16ch;margin:18px 0 26px;font-size:clamp(2.3rem,5.6vw,4.15rem)}
.hero .titre-page span{color:var(--teal)}
.hero-texte{max-width:52ch;color:rgba(238,241,244,.8);font-size:1.08rem}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.reperes-hero{
  display:flex;flex-wrap:wrap;gap:10px 34px;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--trait-clair);
  font-family:var(--mono);font-size:.78rem;color:rgba(238,241,244,.62);
}

/* ---------- Cartes ---------- */
.grille-cartes{display:grid;gap:1px;background:var(--trait);border:1px solid var(--trait);grid-template-columns:repeat(2,1fr)}
.carte{background:var(--papier);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:12px}
.carte p{color:var(--gris);font-size:.97rem}
.carte .lien-carte{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;
  color:var(--teal-fonce);text-decoration:none;margin-top:auto;padding-top:8px;
  border-bottom:1px solid transparent;align-self:flex-start;
}
.carte .lien-carte:hover{border-bottom-color:var(--teal)}

/* ---------- Prestations détaillées ---------- */
.prestation{
  display:grid;grid-template-columns:96px 1fr;gap:clamp(18px,3vw,44px);
  padding:clamp(30px,4vw,42px) 0;border-top:1px solid var(--trait);align-items:start;
}
.prestation:last-of-type{border-bottom:1px solid var(--trait)}
.prestation-repere{
  font-family:var(--mono);font-size:.95rem;color:var(--teal-fonce);
  letter-spacing:.08em;padding-top:6px;
}
.prestation p{color:var(--gris);margin-top:10px;max-width:64ch}
.detail-liste{list-style:none;margin-top:16px;display:grid;gap:0;max-width:64ch}
.detail-liste li{
  padding:9px 0 9px 22px;position:relative;font-size:.95rem;
  border-bottom:1px dotted var(--trait);
}
.detail-liste li::before{content:"";position:absolute;left:0;top:18px;width:10px;height:1px;background:var(--teal)}

/* ---------- Étapes ---------- */
.etape{
  display:grid;grid-template-columns:76px 1fr;gap:clamp(16px,3vw,40px);
  padding:26px 0;border-top:1px solid var(--trait);align-items:start;
}
.etape:last-of-type{border-bottom:1px solid var(--trait)}
.etape-num{
  font-family:var(--display);font-variation-settings:"wdth" 122;font-weight:700;
  font-size:1.9rem;color:var(--teal-fonce);line-height:1;padding-top:4px;
}
.etape p{color:var(--gris);font-size:.98rem;margin-top:5px;max-width:62ch}

/* ---------- Nomenclature ---------- */
.nomenclature{width:100%;border-collapse:collapse;font-size:.95rem}
.nomenclature caption{
  text-align:left;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal);padding-bottom:12px;
}
.nomenclature th{
  text-align:left;font-family:var(--mono);font-weight:500;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(238,241,244,.6);
  padding:10px 14px 10px 0;border-bottom:1px solid var(--trait-clair);
}
.nomenclature td{padding:14px 14px 14px 0;border-bottom:1px solid var(--trait-clair);vertical-align:top}
.nomenclature td:first-child{font-family:var(--mono);color:var(--teal);white-space:nowrap;width:74px}
.nomenclature td:last-child{font-family:var(--mono);font-size:.85rem;color:rgba(238,241,244,.68);white-space:nowrap}

/* ---------- Listes ---------- */
.liste-cibles{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,56px)}
.liste-cibles li{padding:15px 0 15px 26px;border-bottom:1px solid var(--trait);position:relative}
.liste-cibles li::before{content:"";position:absolute;left:0;top:24px;width:11px;height:1px;background:var(--teal)}

/* ---------- Questions fréquentes ---------- */
.question{border-top:1px solid var(--trait);padding:24px 0}
.question:last-of-type{border-bottom:1px solid var(--trait)}
.question h3{font-family:var(--corps);font-size:1.02rem;font-weight:600;margin-bottom:8px}
.question p{color:var(--gris);font-size:.97rem;max-width:64ch}

/* ---------- Deux colonnes ---------- */
.deux-colonnes{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,72px);align-items:start}
.deux-colonnes p+p{margin-top:16px}
.encadre{
  border:1px solid var(--trait-clair);padding:26px;
  font-family:var(--mono);font-size:.86rem;line-height:1.9;color:rgba(238,241,244,.78);
}
.encadre strong{display:block;color:var(--teal);font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:.7rem;margin-bottom:10px}

/* ---------- Contact ---------- */
.bloc-contact{display:grid;grid-template-columns:1fr auto;gap:clamp(26px,4vw,60px);align-items:center}
.mail-direct{
  font-family:var(--mono);font-size:clamp(1rem,2.4vw,1.35rem);
  text-decoration:none;border-bottom:1px solid var(--teal);padding-bottom:3px;
}
.mail-direct:hover{color:var(--teal-fonce)}

/* ---------- Appel final ---------- */
.appel{border-top:1px solid var(--trait);padding:clamp(44px,6vw,72px) 0;text-align:center}
.appel .titre-folio{margin-bottom:.4em}
.appel .chapeau{margin:0 auto 26px}

/* ---------- Texte courant (mentions légales) ---------- */
.texte-courant{max-width:70ch}
.texte-courant h2{font-family:var(--display);font-variation-settings:"wdth" 114;font-size:1.25rem;font-weight:600;margin:34px 0 10px}
.texte-courant h2:first-child{margin-top:0}
.texte-courant p{color:var(--gris);font-size:.99rem}
.texte-courant p+p{margin-top:10px}
.texte-courant a{color:var(--teal-fonce)}

/* ---------- Cartouche ---------- */
.cartouche{background:var(--encre);color:rgba(238,241,244,.6);border-top:1px solid var(--teal)}
.cartouche-grille{display:grid;grid-template-columns:repeat(5,1fr);font-family:var(--mono);font-size:.74rem}
.case-cartouche{padding:16px 18px;border-right:1px solid var(--trait-clair)}
.case-cartouche:last-child{border-right:0}
.case-cartouche b{display:block;font-weight:400;font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(238,241,244,.38);margin-bottom:5px}
.case-cartouche span{color:var(--papier)}
.bas-page{
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;
  padding:16px 0 30px;font-size:.8rem;border-top:1px solid var(--trait-clair);
}
.bas-page nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.bas-page a{color:rgba(238,241,244,.6);text-decoration:none;border-bottom:1px solid transparent}
.bas-page a:hover{color:var(--papier);border-bottom-color:var(--teal)}

/* ---------- Apparition ---------- */
.apparait{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.apparait.visible{opacity:1;transform:none}

:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ---------- Adaptatif ---------- */
@media (max-width:900px){
  .deux-colonnes,.bloc-contact{grid-template-columns:1fr}
  .grille-cartes,.liste-cibles{grid-template-columns:1fr}
  .cartouche-grille{grid-template-columns:repeat(2,1fr)}
  .case-cartouche{border-bottom:1px solid var(--trait-clair)}
}
@media (max-width:760px){
  .barre-interieur{height:auto;flex-wrap:wrap;padding-top:12px;padding-bottom:10px;gap:12px}
  .liens{
    order:3;width:100%;margin-left:0;gap:18px;
    overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;
  }
  .liens::-webkit-scrollbar{display:none}
  .barre .bouton{margin-left:auto;padding:9px 15px;font-size:.76rem}
  .regle span:nth-child(n+6){display:none}
  .prestation,.etape{grid-template-columns:1fr;gap:6px}
  .nomenclature td:last-child,.nomenclature th:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .apparait{opacity:1;transform:none;transition:none}
}