/* ==========================================================================
   Foyane — feuille de style du site commercial
   Fondée sur branding/design-system (Encre/Ambre, Spectral/Luciole).
   Aucune ressource externe (polices et images auto-hébergées — souveraineté).
   ========================================================================== */

/* ---- Polices (auto-hébergées) ------------------------------------------ */
@font-face{
  font-family:"Spectral";
  src:url("../fonts/spectral/Spectral-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Spectral";
  src:url("../fonts/spectral/Spectral-Italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Spectral";
  src:url("../fonts/spectral/Spectral-SemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Spectral";
  src:url("../fonts/spectral/Spectral-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Luciole";
  src:url("../fonts/luciole/Luciole-Regular.woff2") format("woff2"),
      url("../fonts/luciole/Luciole-Regular.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Luciole";
  src:url("../fonts/luciole/Luciole-Italic.woff2") format("woff2"),
      url("../fonts/luciole/Luciole-Italic.woff") format("woff");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Luciole";
  src:url("../fonts/luciole/Luciole-Bold.woff2") format("woff2"),
      url("../fonts/luciole/Luciole-Bold.woff") format("woff");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Luciole";
  src:url("../fonts/luciole/Luciole-BoldItalic.woff2") format("woff2"),
      url("../fonts/luciole/Luciole-BoldItalic.woff") format("woff");
  font-weight:700; font-style:italic; font-display:swap;
}

/* ---- Tokens -------------------------------------------------------------- */
:root{
  --encre:#14233B;      --encre-700:#213a5c;   --encre-soft:#3d4a5c;
  --ambre:#E39A4E;       --ambre-600:#cf8636;   --ambre-100:#FBEBD6;   --ambre-700:#a56b2b;
  --sauge:#6B8F71;       --sauge-100:#EAF0EA;
  --terre:#C0602C;       --terre-100:#F7E7DC;   --terre-700:#a35125;
  --neutre:#8A7A6D;      --neutre-100:#EFEAE3;  --neutre-700:#6f6156;
  --papier:#FBF7F1;      --papier-2:#F3ECE1;    --carte:#FFFFFF;
  --ligne:#E7DED0;       --ligne-forte:#D9CBB3;

  --font-display:"Spectral", Georgia, serif;
  --font-body:"Luciole", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --container:1180px;
  --container-narrow:760px;
  --radius-s:10px; --radius-m:16px; --radius-l:24px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(20,35,59,.04), 0 8px 24px -12px rgba(20,35,59,.16);
  --shadow-lift:0 20px 48px -20px rgba(20,35,59,.28);
}

/* ---- Reset & base --------------------------------------------------------*/
*,*::before,*::after{box-sizing:border-box}
html, body{overflow-x:hidden; overflow-x:clip}
html{scroll-behavior:smooth; scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--papier); color:var(--encre);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.18; margin:0 0 .5em; letter-spacing:-.01em}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em; padding-left:1.25em}
.container{max-width:var(--container); margin:0 auto; padding:0 28px}
.container-narrow{max-width:var(--container-narrow); margin:0 auto; padding:0 28px}
section{padding:96px 0}
@media (max-width:860px){ section{padding:64px 0} .container,.container-narrow{padding:0 20px} }

/* Focus : encre sur fonds clairs (13,9:1), ambre sur surfaces sombres (6,75:1) — seuil non-texte 3:1. */
:focus-visible{outline:3px solid var(--encre); outline-offset:2px; border-radius:4px}
.band-dark :focus-visible, .site-footer :focus-visible, .page-header :focus-visible, .hero :focus-visible{outline-color:var(--ambre)}

.eyebrow{
  font-family:var(--font-body); font-weight:700; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--terre-700); margin:0 0 14px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--ambre); display:inline-block; border-radius:2px}

.lede{font-size:20px; line-height:1.55; color:var(--encre-soft); max-width:640px}
.small{font-size:14px; color:var(--neutre-700)}
.center{text-align:center; margin-left:auto; margin-right:auto}

/* ---- Boutons ---------------------------------------------------------- */
.btn{
  font-family:var(--font-body); font-weight:700; font-size:15.5px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--radius-s); padding:15px 24px; cursor:pointer;
  border:1px solid transparent; text-decoration:none; transition:background .15s, border-color .15s, transform .1s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--encre); color:var(--papier)}
.btn-primary:hover{background:var(--encre-700)}
.btn-accent{background:var(--ambre); color:var(--encre)}
.btn-accent:hover{background:var(--ambre-600)}
.btn-secondary{background:#fff; color:var(--encre); border-color:var(--ligne)}
.btn-secondary:hover{border-color:var(--ligne-forte); background:var(--papier-2)}
.btn-ghost{background:transparent; color:var(--encre)}
.btn-ghost:hover{background:var(--papier-2)}
.btn-lg{padding:17px 28px; font-size:16.5px}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
/* Mobile : jamais de débordement horizontal — les boutons se replient au lieu de pousser la page. */
@media (max-width:640px){
  .nav-cta{gap:10px}
  /* Cible tactile ≥ 44 px (padding 14 + 14 + texte 14 + bordure 2). */
  .nav-cta .btn-accent{padding:14px 16px; font-size:14px}
  .btn{white-space:normal; text-align:center}
}
@media (max-width:480px){ .cta-long{display:none} }

/* ---- Entête / navigation ----------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(251,247,241,.92);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--ligne);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 0}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.brand svg{flex:0 0 auto}
.brand .wordmark{font-family:var(--font-display); font-weight:600; font-size:22px; color:var(--encre)}
.nav-links{display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0}
.nav-links a{text-decoration:none; font-weight:700; font-size:15px; color:var(--encre-soft); padding:6px 0; border-bottom:2px solid transparent}
.nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--encre); border-color:var(--ambre)}
.nav-cta{display:flex; align-items:center; gap:16px}

.nav-burger{display:none; background:none; border:1px solid var(--ligne); border-radius:9px; padding:9px 11px; cursor:pointer}
.nav-burger span, .nav-burger span::before, .nav-burger span::after{
  content:""; display:block; width:20px; height:2px; background:var(--encre); position:relative; transition:.2s;
}
.nav-burger span::before{position:absolute; top:-6px}
.nav-burger span::after{position:absolute; top:6px}

/* Jusqu'à 1080px : menu replié derrière le bouton. Au-delà de 900px les liens tenaient,
   mais serrés contre la marque et repliés sur deux lignes (constaté à 940/1024). */
@media (max-width:1080px){
  /* Menu fermé = display:none inconditionnel — aucun moteur (WebKit inclus) ne peut l'afficher
     par accident. L'animation d'ouverture est sacrifiée au profit de la garantie. */
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0; background:var(--papier);
    flex-direction:column; align-items:stretch; gap:0; padding:6px 0 12px;
    border-bottom:1px solid var(--ligne);
    box-shadow:0 16px 32px -20px rgba(20,35,59,.35);
  }
  body.nav-open .nav-links{display:flex; max-height:calc(100vh - 76px); overflow-y:auto}
  /* Panneau ouvert : chaque lien occupe toute la largeur, cible tactile ≥ 44 px,
     séparateur discret SOUS le lien (jamais un filet à la largeur du texte),
     page courante marquée d'un liseré ambre à gauche — pas de bordure ambre autour. */
  .nav-links li{width:100%}
  .nav-links a{
    display:block; width:100%; padding:16px 24px; font-size:16px; color:var(--encre);
    border:0; border-bottom:1px solid var(--ligne);
  }
  .nav-links li:last-child a{border-bottom:0}
  .nav-links a:hover, .nav-links a[aria-current="page"]{
    color:var(--encre); background:var(--papier-2);
    border-color:var(--ligne); box-shadow:inset 3px 0 0 var(--ambre);
  }
  .nav-burger{display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px}
  .nav-cta .btn-secondary{display:none}
}

/* ---- Hero ---------------------------------------------------------------*/
.hero{position:relative; padding:0; overflow:hidden; min-height:640px; display:flex; align-items:center}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  /* Texte à gauche sous voile dense ; le village reste lisible à droite (.45). */
  background:linear-gradient(100deg, rgba(20,35,59,.90) 0%, rgba(20,35,59,.80) 38%, rgba(20,35,59,.60) 66%, rgba(20,35,59,.45) 100%);
}
/* Mobile : le texte occupe toute la largeur → voile uniforme et dense. */
@media (max-width:700px){
  .hero-bg::after{background:linear-gradient(180deg, rgba(20,35,59,.88) 0%, rgba(20,35,59,.74) 100%)}
}
.hero-inner{position:relative; z-index:1; width:100%; padding:140px 0 96px; color:var(--papier)}
.hero h1{color:var(--papier); font-size:52px; max-width:760px; letter-spacing:-.015em}
.hero .lede{color:#E7DED0; max-width:600px}
.hero-meta{display:flex; gap:22px; flex-wrap:wrap; margin-top:34px; font-size:14px; color:#D9CBB3}
.hero-meta span{display:flex; align-items:center; gap:8px}
.hero-meta .dot{width:6px; height:6px; border-radius:50%; background:var(--ambre)}
@media (max-width:700px){ .hero h1{font-size:36px} .hero-inner{padding:104px 0 64px} }

.page-header{background:var(--encre); color:var(--papier); padding:150px 0 64px}
.page-header h1{color:var(--papier); font-size:42px; max-width:760px}
.page-header .lede{color:#cfd7e3}
@media (max-width:700px){ .page-header{padding:120px 0 48px} .page-header h1{font-size:30px} }

/* ---- Sections & grilles -------------------------------------------------*/
.section-head{max-width:680px; margin:0 0 52px}
.section-head.center{margin:0 auto 52px; text-align:center}
.grid{display:grid; gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} }

.band{background:var(--papier-2)}
.band-dark{background:var(--encre); color:var(--papier)}
.band-dark h2, .band-dark h3{color:var(--papier)}
.band-dark .lede{color:#cfd7e3}
.band-dark .small{color:#a9b4c6}

/* ---- Cartes --------------------------------------------------------------*/
.card{background:var(--carte); border:1px solid var(--ligne); border-radius:var(--radius-m); padding:30px; box-shadow:var(--shadow-card)}
.card h3{font-size:19px; margin-bottom:10px}
.card p:last-child{margin-bottom:0}
.card-icon{
  width:46px; height:46px; border-radius:13px; background:var(--papier-2);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; flex:0 0 auto;
}
.card-num{
  font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--terre-700);
  width:32px; height:32px; border-radius:50%; border:1.5px solid var(--terre-700);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}

.step-row{display:flex; gap:20px; padding:22px 0; border-bottom:1px dotted var(--ligne-forte)}
.step-row:last-child{border-bottom:none}
.step-row .card-num{margin-bottom:0}
.step-row h3{margin-bottom:6px; font-size:18px}
.step-row p{color:var(--encre-soft); margin-bottom:0}

/* ---- Statuts (pastilles) --------------------------------------------------*/
.status-list{display:flex; flex-direction:column; gap:10px}
.status-line{display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--ligne); border-radius:14px; padding:16px 20px; flex-wrap:wrap}
.status-pill{display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:var(--radius-pill); font-weight:700; font-size:14px; white-space:nowrap}
.status-dot{width:9px; height:9px; border-radius:50%}
.status-gloss{font-size:14.5px; color:var(--encre-soft)}
.status-code{font-family:ui-monospace,Menlo,monospace; font-size:11.5px; color:var(--neutre-700); margin-left:auto}
.status-va{background:var(--sauge-100); color:#3f6247} .status-va .status-dot{background:var(--sauge)}
.status-acc{background:var(--terre-100); color:#98441B} .status-acc .status-dot{background:var(--terre)}
.status-rap{background:var(--ambre-100); color:#8a5813} .status-rap .status-dot{background:var(--ambre)}
.status-inj{background:var(--neutre-100); color:#6C5F52} .status-inj .status-dot{background:var(--neutre)}
.status-ref{background:#EEEBEF; color:#5B5560} .status-ref .status-dot{background:#8B8391}
.status-rep{background:#E9EDF2; color:#3E5068} .status-rep .status-dot{background:#5E7290}

/* ---- Escalade (canaux) ----------------------------------------------------*/
.esc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
@media (max-width:960px){ .esc-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .esc-grid{grid-template-columns:1fr} }
.esc-card{border-left:3px solid var(--ambre)}
.esc-card .letter{font-family:var(--font-display); font-weight:600; font-size:26px; color:var(--ambre-700)}

/* ---- Image bleeds & compositions -----------------------------------------*/
.media{border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-lift)}
.media img{width:100%; height:100%; object-fit:cover}
.two-col{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.two-col.reverse{grid-template-columns:.95fr 1.05fr}
.two-col.reverse .media{order:-1}
@media (max-width:900px){
  .two-col, .two-col.reverse{grid-template-columns:1fr}
  .two-col.reverse .media{order:0}
}

/* ---- Bandeau citation / manifeste ------------------------------------------*/
.manifesto{max-width:760px; margin:0 auto; text-align:center}
.manifesto p{font-family:var(--font-display); font-size:24px; line-height:1.5; color:var(--papier)}
.manifesto .sig{margin-top:28px; font-family:var(--font-body); font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--ambre)}

/* ---- Tables (kit de confiance, tarifs) -------------------------------------*/
.table-clean{width:100%; border-collapse:collapse}
.table-clean th,.table-clean td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--ligne); font-size:15px; vertical-align:top}
.table-clean th{color:var(--neutre-700); font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:700}
/* Petits écrans : colonnes trop étroites (un mot par ligne) → chaque ligne devient un bloc
   empilé, libellé au-dessus de sa valeur. L'en-tête de colonnes est masqué visuellement. */
@media (max-width:640px){
  .table-clean thead{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0}
  .table-clean, .table-clean tbody, .table-clean tr, .table-clean th, .table-clean td{display:block; width:100%}
  .table-clean tr{border-bottom:1px solid var(--ligne); padding:14px 0}
  .table-clean tr:last-child{border-bottom:0}
  .table-clean th, .table-clean td{border-bottom:0; padding:2px 0}
  .table-clean th[scope="row"]{padding-bottom:6px}
}

/* ---- Notes / encarts --------------------------------------------------- */
.note{border-left:3px solid var(--ambre); background:#fff; border:1px solid var(--ligne); border-left-width:3px; border-left-color:var(--ambre); border-radius:0 14px 14px 0; padding:18px 22px; font-size:15px; color:var(--encre-soft)}
.note b, .note strong{color:var(--encre)}
.note-title{font-weight:700; color:var(--encre); display:block; margin-bottom:6px}
.footnote-list{font-size:13px; color:var(--neutre-700); border-top:1px solid var(--ligne); padding-top:20px; margin-top:40px}
.footnote-list li{margin-bottom:6px}
/* Appels de note et liens de retour : zone tactile étendue sans bouger la ligne
   (padding sur élément inline + marge négative compensatoire). */
sup a, .footnote-list a{position:relative; padding:12px 6px; margin:0 -6px}

/* ---- Checklist / mise en route -------------------------------------------*/
.checklist{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
.checklist li{display:flex; align-items:flex-start; gap:14px; font-size:15.5px}
.checklist .mark{
  flex:0 0 26px; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--ligne-forte);
  display:flex; align-items:center; justify-content:center; margin-top:1px; color:var(--sauge); font-weight:700; font-size:13px;
}

/* ---- Formulaires ----------------------------------------------------------*/
label{display:block; font-size:13.5px; font-weight:700; color:var(--encre-soft); margin:0 0 7px}
.field{margin-bottom:20px}
input[type="text"],input[type="email"],input[type="tel"],select,textarea{
  width:100%; font-family:var(--font-body); font-size:16px; padding:13px 15px; border:1px solid var(--ligne);
  border-radius:11px; background:#fff; color:var(--encre);
}
textarea{resize:vertical; min-height:130px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--encre); outline-offset:0; border-color:var(--ambre)}
.hint{font-size:12.5px; color:var(--neutre-700); margin-top:6px}
.form-card{background:#fff; border:1px solid var(--ligne); border-radius:var(--radius-l); padding:40px; box-shadow:var(--shadow-card)}
fieldset{border:none; padding:0; margin:0}
/* Honeypot anti-bot : hors écran ET hors tabulation — jamais display:none (certains bots l'ignorent). */
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
/* Bloc d'erreur du formulaire : révélé sans JS via l'ancre /contact#form-error (:target). */
#form-error{display:none; border-left-color:var(--terre)}
#form-error:target{display:block; margin-bottom:24px}

/* ---- Transcription d'appel (illustratif) ---------------------------------*/
.transcript{background:#fff; border:1px solid var(--ligne); border-radius:var(--radius-l); padding:32px; box-shadow:var(--shadow-card)}
.transcript-label{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--neutre-700); font-weight:700; margin-bottom:18px; display:block}
.msg{max-width:78%; padding:14px 18px; border-radius:16px; margin-bottom:14px; font-size:15.5px; line-height:1.5}
.msg-agent{background:var(--papier-2); color:var(--encre); border-bottom-left-radius:4px}
.msg-user{background:var(--encre); color:var(--papier); margin-left:auto; border-bottom-right-radius:4px}
.msg-who{display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; margin-bottom:5px; opacity:.65}

/* ---- Diagramme du moteur --------------------------------------------------*/
.engine-flow{display:flex; align-items:stretch; gap:0; flex-wrap:wrap}
.engine-node{flex:1 1 160px; background:#fff; border:1px solid var(--ligne); border-radius:var(--radius-m); padding:22px 18px; text-align:center; margin:6px}
.engine-node h3{font-family:var(--font-display); font-weight:600; font-size:16px; margin:0 0 6px}
.engine-node p{font-size:13.5px; color:var(--encre-soft); margin:0}
.engine-arrow{display:flex; align-items:center; justify-content:center; color:var(--ambre-700); font-size:20px; flex:0 0 auto; padding:0 4px}
/* Empilement vertical : la flèche pivotée occupe sa propre ligne, centrée —
   sinon elle flotte à droite des cartes et déborde du cadre (constaté à 320/390/768). */
@media (max-width:800px){
  .engine-flow{flex-direction:column}
  .engine-arrow{transform:rotate(90deg); width:100%; flex:0 0 auto; padding:6px 0}
}

/* ---- Pied de page ---------------------------------------------------------*/
.site-footer{background:var(--encre); color:#c7d0dd; padding:64px 0 32px}
.site-footer a{text-decoration:none; color:#c7d0dd}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid #253552}
@media (max-width:800px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr} }
.footer-grid .footer-title{color:#fff; font-family:var(--font-body); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.09em; margin:0 0 16px}
.footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14.5px}
/* Liens du pied de page : zone tactile élargie sans changer l'espacement visuel. */
.footer-grid ul a, .footer-bottom a{display:inline-block; padding:6px 0; margin:-6px 0}
.footer-brand .brand .wordmark{color:#fff}
.footer-brand p{color:#a9b4c6; font-size:14.5px; max-width:320px; margin-top:16px}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:26px; font-size:12.5px; color:#8291a8}
.footer-a11y{font-size:12.5px; color:#a9b4c6; margin-top:10px; max-width:320px}
.med-note{font-size:12.5px; color:var(--ambre); margin-top:4px}

/* ---- Utilitaires ---------------------------------------------------------*/
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.tag{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--terre-700); background:var(--terre-100); padding:5px 12px; border-radius:var(--radius-pill)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip-link{position:absolute; left:-9999px; top:auto; background:var(--encre); color:#fff; padding:12px 18px; border-radius:0 0 10px 0; z-index:100}
.skip-link:focus{left:0; top:0}