/* Feuille écrite à la main pour ce site, HORS SOCLE.
   Sources : artisans/morice-erquy/design.css
             socle/composants/bandeau-cookies/bandeau.css
   Ne pas éditer ce fichier : il est régénéré par build-site.py.
   Empreinte du contenu : 76dc7138be */
/* =====================================================================
   HERVÉ MORICE, ERQUY — fenêtres de toit VELUX
   Système visuel sur mesure, 24 août 2026. HORS SOCLE.

   Parti pris : le produit vendu n'est pas une fenêtre, c'est de la
   lumière. Le site est donc clair, très aéré, et la matière sombre
   n'intervient que par blocs, comme l'ardoise sur un mur de pierre.

   Trois matières et rien d'autre :
     le papier   sable chaud, presque tout le site ;
     l'ardoise   bleu-gris profond, les respirations sombres ;
     la lumière  ambre, jamais en aplat, seulement en trait et en mot.

   Typographie : Instrument Serif pour le display (haut contraste,
   éditorial, un peu de tenue) et Inter pour tout le reste. Les deux
   sont auto-hébergées : aucune requête vers un serveur tiers.
   ===================================================================== */

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('polices/instrument-serif/instrument-serif-400-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:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('polices/instrument-serif/instrument-serif-400-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:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('polices/inter/inter-400-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:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('polices/inter/inter-400-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:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('polices/inter/inter-500-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:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('polices/inter/inter-500-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:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('polices/inter/inter-700-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:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('polices/inter/inter-700-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;}

/* ------------------------------------------------------------- matières */
:root{
  --papier:#F4F1EB;
  --papier-2:#EAE5DC;
  --papier-3:#DFD8CC;
  --encre:#14120F;
  --encre-2:#5F574E;
  --encre-3:#8C8378;
  --ardoise:#20272C;
  --ardoise-2:#2C353B;
  --ardoise-3:#465158;
  --lumiere:#B9682B;
  --lumiere-2:#D9A25E;
  --lumiere-pale:#F0DCC2;
  --trait:#D6CEC1;
  --trait-sombre:rgba(244,241,235,.18);

  --page:min(1440px,100%);
  --marge:clamp(1.25rem,5vw,5.5rem);
  --mesure:64ch;

  --pas-section:clamp(4.5rem,10vw,10rem);
  --pas-bloc:clamp(2.5rem,5vw,4.5rem);

  --lent:.7s cubic-bezier(.16,1,.3,1);
  --vif:.28s cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:1.0625rem;
  line-height:1.72;
  font-feature-settings:"kern","liga","calt";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--lumiere);outline-offset:3px}

.saut{position:absolute;left:-9999px;top:0;background:var(--ardoise);color:#fff;padding:.75rem 1.25rem;z-index:100}
.saut:focus{left:0}

/* Étiquette réservée aux lecteurs d'écran. Un champ sans <label> est un
   champ sans nom pour qui n'entend pas la page, et un aria-label seul ne
   satisfait ni le contrôle 1 du dépôt ni les vieux lecteurs d'écran. */
.hors-ecran{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ------------------------------------------------------------ ossature */
.page{width:var(--page);margin-inline:auto;padding-inline:var(--marge)}
.mesure{max-width:var(--mesure)}

/* La grille éditoriale : une colonne de marge étroite qui porte les
   numéros et les labels, une colonne large qui porte le propos. C'est
   ce décalage qui fait tenir la page, pas les encadrés. */
.duo-edito{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(1.5rem,4vw,4rem)}
@media (max-width:56rem){.duo-edito{grid-template-columns:1fr;gap:1.25rem}}

/* ------------------------------------------------------- typographie */
h1,h2,h3,.display{
  font-family:'Instrument Serif',Georgia,'Times New Roman',serif;
  font-weight:400;
  letter-spacing:-.015em;
  line-height:1.04;
  margin:0;
  text-wrap:balance;
}
h1,.d1{font-size:clamp(2.75rem,7.2vw,6.25rem);line-height:.98;letter-spacing:-.025em}
h2,.d2{font-size:clamp(2rem,4.4vw,3.75rem)}
h3,.d3{font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.15}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

/* Le label en petites capitales espacées : la signature discrète du
   site, elle revient partout et ne dit jamais rien d'inutile. */
.label{
  font-family:'Inter',sans-serif;
  font-size:.6875rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--encre-3);
  margin:0 0 1.5rem;
}
.label--clair{color:rgba(244,241,235,.55)}
.label--lumiere{color:var(--lumiere)}

/* Le numéro de section, en chiffres serif, dans la marge */
.num{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(2.5rem,4vw,3.5rem);
  line-height:1;color:var(--trait);
  display:block;margin-bottom:.75rem;
}

.chapo{font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.55;color:var(--encre-2);max-width:52ch}
.menu-fin{color:var(--encre-2)}

/* liens de texte : soulignement fin, décalé, qui s'épaissit au survol */
.prose a,.lien{
  color:inherit;text-decoration:none;
  background-image:linear-gradient(var(--lumiere),var(--lumiere));
  background-size:100% 1px;background-position:0 1.15em;background-repeat:no-repeat;
  transition:background-size var(--vif);
  padding-bottom:.05em;
}
.prose a:hover,.lien:hover{background-size:100% 2px}

/* ---------------------------------------------------------- en-tête */
.entete{
  /* sticky, et JAMAIS static : c'est ce qui rend le z-index opérant et ce
     qui donne au menu déroulant un ancêtre positionné auquel s'accrocher.
     Passé en static sur mobile, le menu ouvert se retrouvait peint SOUS
     la section d'ouverture, donc invisible et intappable. */
  position:sticky;top:0;z-index:50;
  background:var(--papier);
  border-bottom:1px solid var(--trait);
}
/* Le flou n'est qu'un agrément : il ne porte ni le fond ni la mise en page. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .entete{
    background:rgba(244,241,235,.88);
    backdrop-filter:saturate(1.4) blur(14px);
    -webkit-backdrop-filter:saturate(1.4) blur(14px);
  }
}
.entete__barre{
  width:var(--page);margin-inline:auto;padding:0 var(--marge);
  min-height:4.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.marque{display:flex;flex-direction:column;text-decoration:none;line-height:1.15}
.marque__nom{font-family:'Instrument Serif',Georgia,serif;font-size:1.4rem;letter-spacing:-.01em}
.marque__metier{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--encre-3);margin-top:.2rem}
.entete__droite{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.5rem)}
.menu ul{display:flex;gap:clamp(.8rem,1.5vw,1.6rem);list-style:none;margin:0;padding:0}
.menu a{
  text-decoration:none;font-size:.875rem;color:var(--encre-2);
  padding:.35rem 0;position:relative;transition:color var(--vif);
  /* neuf entrées depuis l'ouverture de la page Volet roulant : sans ce
     nowrap, « Pose neuve » et « À distance » se coupaient en deux lignes
     entre le repli du menu et le grand écran. */
  white-space:nowrap;
}
.menu a::after{
  content:"";position:absolute;left:0;right:100%;bottom:.1rem;height:1px;
  background:var(--lumiere);transition:right var(--vif);
}
.menu a:hover{color:var(--encre)}
.menu a:hover::after,.menu a[aria-current="page"]::after{right:0}
.menu a[aria-current="page"]{color:var(--encre)}
.entete__tel{
  font-size:.9375rem;font-weight:500;text-decoration:none;white-space:nowrap;
  font-variant-numeric:tabular-nums;
  border:1px solid var(--trait);border-radius:999px;padding:.55rem 1.15rem;
  transition:border-color var(--vif),background var(--vif),color var(--vif);
}
.entete__tel:hover{background:var(--ardoise);border-color:var(--ardoise);color:var(--papier)}
.entete__bascule{display:none;background:none;border:1px solid var(--trait);border-radius:999px;font:inherit;font-size:.8125rem;padding:.5rem 1rem;cursor:pointer}
/* Le menu se replie à 88rem et non plus à 80rem : dix entrées depuis
   l'ouverture de la page Réalisations, elles ne tiennent plus sur une
   ligne en dessous de 1408 px. */
@media (max-width:88rem){
  .entete__bascule{display:block}
  .menu{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--papier);border-bottom:1px solid var(--trait);
    z-index:60;                       /* au-dessus du contenu de la page */
    /* Écrans courts et paysage : il faut retrancher l'en-tête AU-DESSUS
       et la barre d'appel fixe EN DESSOUS, sinon les derniers liens
       passent sous la barre. vh d'abord, dvh pour les navigateurs qui
       le connaissent. */
    max-height:calc(100vh - 4.5rem);
    max-height:calc(100dvh - 4.5rem);
    overflow-y:auto;overscroll-behavior:contain;
    box-shadow:0 18px 30px -18px rgba(20,18,15,.35);
  }
  .menu.menu--ouvert{display:block}
  .menu ul{flex-direction:column;gap:0;padding:.5rem var(--marge) 1.25rem}
  .menu li+li{border-top:1px solid var(--trait)}
  /* Téléphone couché : huit liens en une colonne demandent de défiler dans
     le menu. Deux colonnes les font tenir d'un coup. */
  @media (max-height:32rem){
    .menu ul{display:grid;grid-template-columns:1fr 1fr;column-gap:1.5rem}
    .menu li{border-top:1px solid var(--trait)}
    .menu li+li{border-top:1px solid var(--trait)}
    .menu li:nth-child(-n+2){border-top:none}
    .menu a{padding:.7rem 0}
  }
  .menu a{display:block;padding:.85rem 0;font-size:1rem}
  .menu a::after{display:none}
  .entete__tel{display:none}
}

/* --------------------------------------------------------- ouverture
   Toujours pas d'image plein cadre derrière le texte : la déclaration
   typographique tient la colonne de gauche, et la photo occupe une
   colonne à elle, comme une planche posée à côté. La lumière monte du
   bas de page comme elle monte dans un comble. */
.ouverture{position:relative;overflow:hidden;padding:clamp(3.5rem,9vw,7.5rem) 0 clamp(3rem,6vw,5rem)}
.ouverture::before{
  content:"";position:absolute;inset:auto 0 0 0;height:70%;
  background:radial-gradient(120% 100% at 78% 100%,rgba(217,162,94,.28) 0%,rgba(217,162,94,.10) 38%,transparent 68%);
  pointer-events:none;
}
.ouverture__grille{
  position:relative;display:grid;align-items:center;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2.5rem,5vw,5rem);
}
.ouverture__contenu{position:relative;min-width:0}
.ouverture h1{max-width:22ch}
.ouverture h1 em{font-style:italic;color:var(--lumiere)}
.ouverture__chapo{margin-top:clamp(1.5rem,3vw,2.5rem);max-width:46ch;font-size:clamp(1.0625rem,1.4vw,1.25rem);color:var(--encre-2)}
.ouverture__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}

/* la marque du produit posé, sous les boutons : un logo et une phrase,
   pas un badge. Le logo garde ses proportions et ne dépasse pas la
   hauteur d'une ligne de texte courant. */
.ouverture__marque{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:clamp(2rem,3.5vw,2.75rem);padding-top:1.35rem;
  border-top:1px solid var(--trait);max-width:36rem;
}
.ouverture__marque img{width:clamp(120px,11vw,164px);height:auto;flex:0 0 auto}
.ouverture__marque span{flex:1 1 15rem;min-width:0;font-size:.9375rem;color:var(--encre-2);line-height:1.5}

/* la photo d'ouverture : cadrage debout, pas de cadre ni d'ombre */
.ouverture__vue{min-width:0}
.ouverture__vue img{width:100%;aspect-ratio:4/5;object-fit:cover}

@media (max-width:60rem){
  .ouverture__grille{grid-template-columns:1fr;gap:clamp(2rem,5vw,3rem)}
  .ouverture__vue img{aspect-ratio:4/5}
  .ouverture__marque{max-width:none}
}

/* la bande d'accroche sous l'ouverture : trois faits, filets fins */
.faits{border-top:1px solid var(--trait);margin-top:clamp(3rem,6vw,5rem)}
.faits ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.faits li{padding:1.75rem clamp(1rem,2vw,2rem) 1.75rem 0}
.faits li+li{border-left:1px solid var(--trait);padding-left:clamp(1rem,2vw,2rem)}
.faits dt{font-size:.9375rem;font-weight:500;margin-bottom:.35rem}
.faits dd{margin:0;font-size:.9375rem;color:var(--encre-2);line-height:1.6}
@media (max-width:56rem){
  .faits ul{grid-template-columns:1fr}
  .faits li{padding:1.25rem 0}
  .faits li+li{border-left:none;border-top:1px solid var(--trait);padding-left:0}
}

/* ---------------------------------------------------------- boutons */
.bouton{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.9375rem;font-weight:500;text-decoration:none;
  padding:.95rem 1.6rem;border-radius:999px;border:1px solid transparent;
  transition:background var(--vif),color var(--vif),border-color var(--vif),transform var(--vif);
}
.bouton:hover{transform:translateY(-1px)}
.bouton--sombre{background:var(--ardoise);color:var(--papier)}
.bouton--sombre:hover{background:var(--encre)}
.bouton--ligne{border-color:var(--trait);color:var(--encre)}
.bouton--ligne:hover{border-color:var(--encre);background:transparent}
.bouton--clair{background:var(--papier);color:var(--encre)}
.bouton--clair:hover{background:#fff}
.bouton--fantome{border-color:var(--trait-sombre);color:var(--papier)}
.bouton--fantome:hover{border-color:var(--papier)}
.bouton--tel{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------- sections */
.section{padding:var(--pas-section) 0}
.section--papier2{background:var(--papier-2)}
.section--ardoise{background:var(--ardoise);color:var(--papier)}
.section--ardoise .chapo,.section--ardoise p{color:rgba(244,241,235,.72)}
.section--ardoise h1,.section--ardoise h2,.section--ardoise h3{color:var(--papier)}
.section--filet{border-top:1px solid var(--trait)}
.section__titre{max-width:22ch}

/* --------------------------------------------- les trois services
   Aucune carte, aucune bordure : des lignes de registre, un grand
   numéro, et une flèche qui avance au survol. */
.registre{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait)}
.registre>li{border-bottom:1px solid var(--trait)}
.registre a{
  display:grid;grid-template-columns:5.5rem minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,3rem);align-items:start;
  padding:clamp(1.75rem,3.5vw,2.75rem) 0;
  text-decoration:none;position:relative;
  transition:padding-left var(--lent),color var(--vif);
}
.registre a::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--papier-2);z-index:-1;transition:width var(--lent);
}
.registre a:hover{padding-left:1.25rem}
.registre__num{font-family:'Instrument Serif',Georgia,serif;font-size:1.5rem;color:var(--encre-3);line-height:1.3}
.registre__titre{display:block;font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1.1;margin:0 0 .6rem}
.registre__texte{display:block;color:var(--encre-2);font-size:1rem;max-width:56ch;margin:0}
.registre__fleche{
  align-self:center;width:2.75rem;height:2.75rem;border-radius:999px;
  border:1px solid var(--trait);display:grid;place-items:center;
  transition:background var(--vif),border-color var(--vif),transform var(--vif);
}
.registre a:hover .registre__fleche{background:var(--ardoise);border-color:var(--ardoise);transform:translateX(4px)}
.registre a:hover .registre__fleche svg{stroke:var(--papier)}
.registre__fleche svg{stroke:var(--encre);transition:stroke var(--vif)}
@media (max-width:56rem){
  .registre a{grid-template-columns:2.5rem minmax(0,1fr);gap:1rem}
  .registre__fleche{display:none}
}

/* ------------------------------------------------------ la figure
   Les images ne portent ni cadre ni ombre. Une légende fine dessous,
   alignée à gauche, comme une planche. */
figure{margin:0}
.figure img{width:100%}

/* La ligne de précision sous un chiffre commercial : elle doit être lue si
   on la cherche, et ne jamais casser l'élan de l'argument. */
.prose .mention{
  font-size:.8125rem;line-height:1.5;color:var(--encre-3);
  margin-top:-.35rem;
}
.figure figcaption{
  margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--trait);
  font-size:.8125rem;color:var(--encre-3);line-height:1.5;
}
.section--ardoise .figure figcaption{border-color:var(--trait-sombre);color:rgba(244,241,235,.55)}

/* Deux photos d'un même chantier, côte à côte, qui se remettent l'une sous
   l'autre dès que la colonne devient étroite. */
.paire{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  gap:clamp(1rem,2vw,1.5rem);align-items:start;
}

/* ------------------------------------------------ avant / après lumière
   Le seul dispositif interactif du site, et il dit le produit :
   on tire la poignée, la pièce s'éclaire. */
.revele{position:relative;user-select:none;overflow:hidden;background:var(--ardoise-2)}
.revele img{width:100%;display:block}
.revele__apres{position:absolute;inset:0;clip-path:inset(0 0 0 var(--part,50%))}
.revele__apres img{height:100%;object-fit:cover}
.revele__avant{filter:brightness(.42) saturate(.65) contrast(1.05)}
.revele__poignee{
  position:absolute;top:0;bottom:0;left:var(--part,50%);width:2px;
  background:var(--papier);transform:translateX(-1px);pointer-events:none;
  box-shadow:0 0 0 1px rgba(20,18,15,.15);
}
.revele__poignee::after{
  content:"";position:absolute;top:50%;left:50%;width:3rem;height:3rem;
  transform:translate(-50%,-50%);border-radius:999px;
  background:var(--papier);box-shadow:0 4px 20px rgba(20,18,15,.28);
}
.revele__pastille{
  position:absolute;top:50%;left:var(--part,50%);transform:translate(-50%,-50%);
  z-index:2;pointer-events:none;font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--encre);font-weight:500;
}
.revele input[type="range"]{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;
}
.revele__legendes{display:flex;justify-content:space-between;margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--trait);font-size:.8125rem;color:var(--encre-3)}

/* ------------------------------------------------------ la coupe SVG */
.coupe{width:100%;height:auto;display:block}
.coupe text{font-family:'Inter',sans-serif;font-size:11px;fill:var(--encre-2);letter-spacing:.02em}
.coupe .cote{font-size:10px;fill:var(--encre-3)}

/* --------------------------------------------------------- étapes */
.etapes{list-style:none;margin:0;padding:0;counter-reset:pas;border-top:1px solid var(--trait)}
.etapes li{
  counter-increment:pas;border-bottom:1px solid var(--trait);
  display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:clamp(1rem,3vw,3rem);
  padding:clamp(1.5rem,3vw,2.5rem) 0;
}
.etapes li::before{
  content:"0" counter(pas);
  font-family:'Instrument Serif',Georgia,serif;font-size:1.5rem;color:var(--encre-3);line-height:1.2;
}
.etapes h3{font-size:clamp(1.15rem,1.7vw,1.5rem);margin-bottom:.5rem}
.etapes p{color:var(--encre-2);font-size:1rem;max-width:60ch}
@media (max-width:56rem){.etapes li{grid-template-columns:2.5rem minmax(0,1fr);gap:1rem}}

/* --------------------------------------------------------- preuves */
.preuves{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--trait-sombre)}
.preuves li{padding:clamp(1.75rem,3vw,2.75rem) clamp(1rem,2vw,2rem) 0 0}
.preuves li+li{border-left:1px solid var(--trait-sombre);padding-left:clamp(1rem,2vw,2rem)}
.preuves strong{
  display:block;font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(3rem,6vw,4.75rem);line-height:1;color:var(--papier);margin-bottom:.6rem;
  letter-spacing:-.02em;
}
.preuves span{color:rgba(244,241,235,.6);font-size:.9375rem;line-height:1.6;display:block;max-width:30ch}
@media (max-width:56rem){
  .preuves{grid-template-columns:1fr}
  .preuves li{padding:1.5rem 0}
  .preuves li+li{border-left:none;border-top:1px solid var(--trait-sombre);padding-left:0}
}

/* -------------------------------------------------------- symptômes */
.symptomes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--trait)}
.symptomes li{border-bottom:1px solid var(--trait)}
.symptomes li:nth-child(odd){border-right:1px solid var(--trait)}
.symptomes a{
  display:block;padding:1.5rem clamp(1rem,2vw,2rem) 1.5rem 0;text-decoration:none;
  transition:background var(--vif),padding-left var(--vif);
}
.symptomes a:hover{background:var(--papier-2);padding-left:1rem}
.symptomes strong{display:block;font-weight:500;margin-bottom:.3rem}
.symptomes span{color:var(--encre-2);font-size:.9375rem}
@media (max-width:56rem){
  .symptomes{grid-template-columns:1fr}
  .symptomes li:nth-child(odd){border-right:none}
  .symptomes a{padding-right:0}
}

/* -------------------------------------------------------------- FAQ */
.faq{border-top:1px solid var(--trait)}
.faq details{border-bottom:1px solid var(--trait)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.5rem 3rem 1.5rem 0;position:relative;
  font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.25;
  transition:color var(--vif);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.35rem;top:2.1rem;width:14px;height:14px;
  background:
    linear-gradient(var(--encre),var(--encre)) center/14px 1px no-repeat,
    linear-gradient(var(--encre),var(--encre)) center/1px 14px no-repeat;
  transition:transform var(--vif);
}
.faq details[open] summary::after{transform:rotate(90deg);background:linear-gradient(var(--lumiere),var(--lumiere)) center/14px 1px no-repeat}
.faq details p{color:var(--encre-2);padding:0 3rem 1.75rem 0;margin:0;max-width:70ch}
.faq details p+p{padding-top:0;margin-top:-.5rem}

/* ------------------------------------------------------ appel final */
.final{background:var(--ardoise);color:var(--papier);padding:var(--pas-section) 0;position:relative;overflow:hidden}
.final::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 120% at 15% 0%,rgba(217,162,94,.22),transparent 60%);
  pointer-events:none;
}
.final__contenu{position:relative}
.final h2{max-width:18ch}
.final__tel{
  display:inline-block;margin-top:clamp(1.5rem,3vw,2.5rem);
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(2.5rem,7vw,5rem);line-height:1;letter-spacing:-.02em;
  color:var(--papier);text-decoration:none;font-variant-numeric:tabular-nums;
  transition:color var(--vif);
}
.final__tel:hover{color:var(--lumiere-2)}
.final__note{margin-top:1.25rem;color:rgba(244,241,235,.55);font-size:.9375rem}

/* -------------------------------------------------------- pages int. */
.bandeau{padding:clamp(3rem,7vw,6rem) 0 clamp(2rem,4vw,3.5rem);border-bottom:1px solid var(--trait)}
.bandeau h1{max-width:18ch}
/* Les titres de guides sont des phrases entières : au corps de l'accueil ils
   occuperaient quatre lignes. On les ramène d'un cran. */
.bandeau--guide h1{font-size:clamp(2.25rem,4.2vw,3.5rem);max-width:26ch;line-height:1.06}
.bandeau .chapo{margin-top:1.5rem}

.prose{max-width:var(--mesure);font-size:1.0625rem}
.prose h2{font-size:clamp(1.6rem,2.8vw,2.35rem);margin:2.75em 0 .7em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(1.2rem,1.8vw,1.5rem);margin:2em 0 .5em}
.prose ul{padding-left:0;list-style:none;margin:0 0 1.5em}
.prose li{position:relative;padding-left:1.5rem;margin-bottom:.6rem}
.prose li::before{content:"";position:absolute;left:0;top:.72em;width:.4rem;height:1px;background:var(--lumiere)}
.prose .note{
  background:var(--papier-2);border-left:2px solid var(--lumiere);
  padding:1.5rem 1.75rem;margin:2.5rem 0;font-size:1rem;color:var(--encre-2);
}
.prose figure{margin:2.5rem 0}

/* colonne latérale des pages service */
.duo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.lateral{position:sticky;top:6.5rem;border-top:1px solid var(--encre);padding-top:1.5rem}
.lateral h2{font-size:1.25rem;margin-bottom:1.25rem}
.lateral ul{list-style:none;margin:0 0 1.75rem;padding:0}
.lateral li{padding:.7rem 0;border-bottom:1px solid var(--trait);font-size:.9375rem;color:var(--encre-2)}
.lateral .bouton{width:100%;justify-content:center}
@media (max-width:64rem){.duo{grid-template-columns:1fr}.lateral{position:static}}

/* --------------------------------------------------------- articles */
.articles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--trait)}
.articles li{border-bottom:1px solid var(--trait)}
.articles li:nth-child(odd){border-right:1px solid var(--trait)}
.articles a{display:block;padding:clamp(1.75rem,3vw,2.5rem) clamp(1.5rem,3vw,2.5rem) clamp(1.75rem,3vw,2.5rem) 0;text-decoration:none;height:100%;transition:background var(--vif),padding-left var(--vif)}
.articles a:hover{background:var(--papier-2);padding-left:1.25rem}
.articles h3{font-size:clamp(1.25rem,2vw,1.65rem);margin-bottom:.6rem;max-width:24ch}
.articles p{color:var(--encre-2);font-size:.9375rem;margin:0;max-width:46ch}
.articles .suite{display:inline-block;margin-top:1rem;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lumiere);font-weight:500}
@media (max-width:56rem){
  .articles{grid-template-columns:1fr}
  .articles li:nth-child(odd){border-right:none}
  .articles a{padding-right:0}
}

/* ---------------------------------------------------------- contact */
.fiche-contact{border-top:1px solid var(--encre);padding-top:2rem}
.fiche-contact dl{margin:2.5rem 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.fiche-contact dt{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--encre-3);padding-top:1.25rem;border-top:1px solid var(--trait);margin-bottom:.5rem}
.fiche-contact dd{margin:0 0 1.25rem;color:var(--encre-2)}
.tel-geant{
  font-family:'Instrument Serif',Georgia,serif;font-size:clamp(2.25rem,5.5vw,3.75rem);
  line-height:1;letter-spacing:-.02em;text-decoration:none;font-variant-numeric:tabular-nums;
  display:inline-block;transition:color var(--vif);
}
.tel-geant:hover{color:var(--lumiere)}

/* ------------------------------------------------------------- pied */
.pied{background:var(--ardoise);color:rgba(244,241,235,.7);padding:clamp(3rem,6vw,5rem) 0 2rem;font-size:.9375rem}
.pied a{color:var(--papier);text-decoration:none}
.pied a:hover{color:var(--lumiere-2)}
.pied__haut{display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:clamp(2rem,4vw,4rem);padding-bottom:2.5rem;border-bottom:1px solid var(--trait-sombre)}
.pied h2{font-family:'Inter',sans-serif;font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,241,235,.45);margin-bottom:1.25rem}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin-bottom:.5rem}
.pied__marque{font-family:'Instrument Serif',Georgia,serif;font-size:1.75rem;color:var(--papier);line-height:1.15;margin-bottom:.75rem}
.pied__bas{padding-top:1.75rem;font-size:.8125rem;color:rgba(244,241,235,.45)}
.pied__bas p{margin-bottom:.4rem}
@media (max-width:56rem){.pied__haut{grid-template-columns:1fr;gap:2.5rem}}

/* ------------------------------------------------- barre d'appel mobile */
.appel-fixe{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;background:var(--ardoise);border-top:1px solid var(--trait-sombre)}
.appel-fixe a{flex:1;text-align:center;padding:1rem .5rem;text-decoration:none;font-size:.9375rem;font-weight:500;color:var(--papier)}
.appel-fixe a:first-child{background:var(--lumiere)}
.appel-fixe svg{vertical-align:-3px;margin-right:.4rem}
@media (max-width:60rem){
  .appel-fixe{display:flex}
  body{padding-bottom:3.5rem}
  /* Menu ouvert : la barre d'appel fait doublon avec la navigation et lui
     mangeait ses derniers liens en paysage. On l'escamote le temps du
     menu ; le numéro reste joignable par la page Contact. */
  body.nav-ouverte .appel-fixe{display:none}
  .lateral{position:static}
}

/* ---------------------------------------- apparitions au défilement */
@media (prefers-reduced-motion:no-preference){
  .monte{opacity:0;transform:translateY(18px);transition:opacity var(--lent),transform var(--lent)}
  .monte.vu{opacity:1;transform:none}
}

/* tableaux sobres, dans les guides */
table{border-collapse:collapse;width:100%;margin:2rem 0;font-size:.9375rem}
th,td{border-bottom:1px solid var(--trait);padding:.85rem 1rem .85rem 0;text-align:left;vertical-align:top}
th{font-weight:500;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-3)}

/* --------------------------------------------- formulaire de contact */
.formulaire h2{max-width:22ch}
.formulaire__note{margin-top:.75rem;color:var(--encre-2);max-width:52ch}
.formulaire form{margin-top:1.75rem;max-width:34rem}
.formulaire .champ{margin-bottom:1.15rem}
.formulaire .champ label{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3);margin-bottom:.45rem}
.formulaire input,.formulaire textarea{width:100%;font:inherit;color:var(--encre);background:#fff;border:1px solid var(--trait);border-radius:.5rem;padding:.85rem .95rem}
.formulaire textarea{min-height:7.5rem;resize:vertical}
.formulaire input:focus-visible,.formulaire textarea:focus-visible{outline:2px solid var(--ardoise);outline-offset:1px}
.formulaire .pot{position:absolute;left:-9999px;top:auto}
.formulaire .bouton{margin-top:.35rem}

/* Contact : téléphone et formulaire au même niveau, deux colonnes. */
.contact-duo{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.contact-duo .formulaire{border-top:1px solid var(--encre);padding-top:2rem}
.contact-duo .label{margin-bottom:1rem}
@media (max-width:56rem){.contact-duo{grid-template-columns:1fr;gap:2.75rem}}

/* ------------------------------------------- bandeau cookies (habillage)
   Le dessin du bandeau vit dans socle/composants/bandeau-cookies/bandeau.css,
   ajouté à la suite de cette feuille par build-site.py. Il ne connaît aucune
   couleur : on lui donne ici les matières de la maison, et il s'habille.

   Deux réglages qui comptent :

     --cookie-plan  80. Au-dessus de la barre d'appel (60) et du menu
                    déplié (60), sous le lien de saut au contenu (100),
                    qui doit rester le tout premier arrêt du clavier.

     --cookie-bas   la barre d'appel fixe occupe le bas de l'écran sous
                    60rem, sur la hauteur des 3,5rem que `body` réserve.
                    Sans ce décalage, le bandeau lui passerait dessus et
                    masquerait le numéro de téléphone, c'est-à-dire la
                    seule chose que ce site a à vendre. */
:root{
  --cookie-fond:#fff;
  --cookie-bord:var(--trait);
  --cookie-titre:var(--encre);
  --cookie-texte:var(--encre-2);
  --cookie-doux:var(--papier);
  /* Le bouton prend l'ardoise, pas l'ambre. L'ambre sous du texte clair
     donne 3,7:1, sous les 4,5:1 du niveau AA que ce site vise ; l'ardoise
     donne 13:1. Et les liens suivent la convention de la maison : le texte
     reste à l'encre, l'ambre ne sert qu'au trait sous le mot. */
  --cookie-accent:var(--ardoise);
  --cookie-sur-accent:var(--papier);
  --cookie-lien:var(--encre);
  --cookie-lien-trait:var(--lumiere);
  --cookie-titre-police:'Instrument Serif',Georgia,'Times New Roman',serif;
  /* Instrument Serif n'a que la graisse 400. Lui demander du 600 ferait
     fabriquer un faux gras au navigateur, épais et sale à cette taille.
     On rend la graisse au dessin de la police et on monte le corps,
     comme partout ailleurs sur ce site. */
  --cookie-titre-graisse:400;
  --cookie-titre-corps:1.35rem;
  --cookie-titre-espace:-.015em;
  --cookie-rayon:1rem;
  --cookie-ombre:0 12px 40px rgba(20,18,15,.13);
  --cookie-plan:80;
  --cookie-bas:20px;
}
@media (max-width:60rem){
  :root{--cookie-bas:calc(3.5rem + 26px)}
}


/* =====================================================================
   BANDEAU COOKIES « MURPH LE COOKIE » — feuille de référence.

   Origine : murphytravelplanner.fr, où le bandeau garde Google Analytics
   et le pixel Meta. Repris ici comme composant commun, pour que les deux
   modes (porte de consentement / simple information) aient la même tête.

   Le composant ne connaît AUCUNE couleur en dur. Il lit une poignée de
   variables, et se donne des valeurs neutres quand le site ne les définit
   pas. Un site qui veut l'habiller n'a donc rien à surcharger : il pose
   ses jetons dans son :root, et le bandeau prend sa robe.

     --cookie-fond           fond de la carte              (#fff)
     --cookie-bord           filet de la carte             (gris clair)
     --cookie-titre          couleur du titre              (presque noir)
     --cookie-texte          couleur du corps              (gris chaud)
     --cookie-doux           fond du dépliant « en savoir plus »
     --cookie-accent         fond du bouton d'action       (brun brûlé)
     --cookie-sur-accent     texte posé sur l'accent       (blanc)
     --cookie-lien           couleur des liens             (l'accent)
     --cookie-lien-trait     couleur du soulignement       (le lien)
     --cookie-titre-police   police du titre               (héritée)
     --cookie-titre-corps    corps du titre                (18px)
     --cookie-titre-graisse  graisse du titre              (600)
     --cookie-titre-espace   approche du titre             (normale)
     --cookie-rayon          rayon des angles              (1rem)
     --cookie-ombre          ombre portée
     --cookie-plan           z-index                       (9999)
     --cookie-bas            distance au bas de l'écran    (20px)

   L'orange de MTP (#B9682B) n'est PAS repris comme valeur par défaut :
   sous du texte blanc de 14 px il donne 4,1:1, en dessous des 4,5:1
   exigés par le niveau AA. Le défaut est donc un brun plus sourd, qui
   passe à 6,4:1. Un site qui pose son propre accent vérifie le sien.

   Deux règles de fabrication qui ont leur raison d'être :

   1. La carte est en `position:fixed` en BAS À GAUCHE. À droite se
      trouvent, sur la plupart de nos sites, le bouton d'appel ou la
      bulle de messagerie ; à gauche il n'y a rien.

   2. Sur petit écran la carte remonte de `--cookie-bas`. Les sites
      artisans portent une barre d'appel fixe en pied d'écran : sans ce
      décalage, le bandeau la recouvre et mange le numéro de téléphone.
      Chaque site règle donc `--cookie-bas` à la hauteur de sa barre.
   ===================================================================== */

.cookie-banner{
  position:fixed;
  left:20px;
  bottom:var(--cookie-bas,20px);
  z-index:var(--cookie-plan,9999);
  display:flex;
  gap:16px;
  align-items:flex-start;
  max-width:390px;
  padding:20px;
  background:var(--cookie-fond,#fff);
  border:1px solid var(--cookie-bord,rgba(20,18,15,.14));
  border-radius:var(--cookie-rayon,1rem);
  box-shadow:var(--cookie-ombre,0 10px 40px rgba(20,18,15,.14));
  opacity:0;
  transform:translateY(20px);
  transition:opacity .4s ease,transform .4s ease;
}

/* `hidden` doit gagner, et il ne gagne pas tout seul : la règle du
   navigateur qui cache un élément `hidden` cède devant N'IMPORTE quelle
   règle d'auteur qui lui donne un `display`. Sans cette ligne, la carte
   resterait posée en bas de l'écran, invisible mais présente — et comme
   un élément à `opacity:0` intercepte quand même les clics, elle
   avalerait ceux qui tombent dessus. Même chose pour la pastille. */
.cookie-banner[hidden],
.cookie-mini[hidden]{display:none}

.cookie-banner.visible{opacity:1;transform:translateY(0)}

.cookie-banner__icon{flex-shrink:0}

.cookie-banner__icon img{
  width:60px;height:60px;
  animation:cookieBounce 2s ease-in-out infinite;
}

@keyframes cookieBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

.cookie-banner:hover .cookie-banner__icon img{
  animation:none;
  transform:rotate(-5deg) scale(1.05);
}

/* Le rebond est du décor. Il disparaît pour qui a demandé à son système
   d'arrêter les animations, sinon on impose un mouvement permanent à
   quelqu'un que le mouvement gêne. */
@media (prefers-reduced-motion:reduce){
  .cookie-banner__icon img,
  .cookie-banner:hover .cookie-banner__icon img{animation:none;transform:none}
  .cookie-banner,.cookie-mini{transition:none}
}

.cookie-banner__content{flex:1;min-width:0}

/* Le corps et la graisse du titre sont eux aussi des jetons : une police
   display qui n'a qu'une seule graisse (c'est le cas d'Instrument Serif,
   chez Morice) fabriquerait un faux gras si on lui imposait 600. Le site
   rend alors la graisse au dessin de la police et monte le corps. */
.cookie-banner__title{
  font-family:var(--cookie-titre-police,inherit);
  font-size:var(--cookie-titre-corps,18px);
  font-weight:var(--cookie-titre-graisse,600);
  letter-spacing:var(--cookie-titre-espace,normal);
  line-height:1.3;
  color:var(--cookie-titre,#14120F);
  margin-bottom:8px;
}

.cookie-banner__text{
  margin:0 0 4px;
  font-size:13px;
  line-height:1.55;
  color:var(--cookie-texte,#5F574E);
}

.cookie-banner__text a,
.cookie-banner__info a{
  color:var(--cookie-lien,var(--cookie-accent,#8E4E1F));
  text-decoration:underline;
  text-decoration-color:var(--cookie-lien-trait,currentColor);
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}
.cookie-banner__text a:hover,
.cookie-banner__info a:hover{text-decoration-thickness:2px}

.cookie-banner__toggle{
  display:flex;
  align-items:center;
  gap:4px;
  margin:12px 0;
  padding:0;
  background:none;
  border:none;
  font:inherit;
  font-size:12px;
  color:var(--cookie-texte,#5F574E);
  cursor:pointer;
}

.cookie-banner__toggle:hover{color:var(--cookie-titre,#14120F)}

.cookie-banner__arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;height:20px;
  font-size:16px;
  transition:transform .2s ease;
}

.cookie-banner__toggle[aria-expanded="true"] .cookie-banner__arrow{transform:rotate(180deg)}

/* Le dépliant est masqué par `hidden`, pas par une classe : un lecteur
   d'écran le saute alors comme le fait l'œil, et le bouton porte
   aria-expanded pour dire dans quel état il est. */
.cookie-banner__info{
  margin-bottom:12px;
  padding:12px;
  background:var(--cookie-doux,#F4F1EB);
  border-radius:calc(var(--cookie-rayon,1rem) / 2);
  font-size:12px;
  line-height:1.55;
  color:var(--cookie-texte,#5F574E);
}

.cookie-banner__info p{margin:0 0 8px}
.cookie-banner__info ul{margin:0 0 8px;padding-left:16px}
.cookie-banner__info li{margin-bottom:4px}
.cookie-banner__info a{display:inline-block;margin-top:4px;font-weight:500}

.cookie-banner__buttons{display:flex;gap:10px;flex-wrap:wrap}

.cookie-banner__btn{
  padding:10px 18px;
  border:1px solid transparent;
  border-radius:999px;
  font:inherit;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}

.cookie-banner__btn--accept{
  background:var(--cookie-accent,#8E4E1F);
  color:var(--cookie-sur-accent,#fff);
}
.cookie-banner__btn--accept:hover{transform:translateY(-1px);filter:brightness(1.08)}

.cookie-banner__btn--refuse{
  background:transparent;
  color:var(--cookie-texte,#5F574E);
  border-color:var(--cookie-bord,rgba(20,18,15,.14));
}
.cookie-banner__btn--refuse:hover{border-color:var(--cookie-titre,#14120F);color:var(--cookie-titre,#14120F)}

/* ---------------------------------------------------- la pastille ---- */
/* Une fois le bandeau refermé, le cookie reste joignable en petit. C'est
   ce qui permet de revenir sur un choix, exigence du RGPD quand le
   bandeau garde des traceurs, et simple politesse quand il n'en garde
   aucun : le visiteur qui a cliqué trop vite peut relire. */
.cookie-mini{
  position:fixed;
  left:20px;
  bottom:var(--cookie-bas,20px);
  z-index:calc(var(--cookie-plan,9999) - 1);
  display:flex;
  align-items:center;
  justify-content:center;
  width:50px;height:50px;
  padding:0;
  background:var(--cookie-fond,#fff);
  border:1px solid var(--cookie-bord,rgba(20,18,15,.14));
  border-radius:999px;
  box-shadow:var(--cookie-ombre,0 4px 20px rgba(20,18,15,.14));
  cursor:pointer;
  opacity:0;
  transform:scale(0);
  transition:opacity .3s ease,transform .3s ease;
}

.cookie-mini.visible{opacity:1;transform:scale(1)}
.cookie-mini:hover{transform:scale(1.1)}
.cookie-mini img{width:30px;height:30px}

/* ------------------------------------------------------- petit écran -- */
@media (max-width:30rem){
  .cookie-banner{
    left:10px;right:10px;
    bottom:calc(var(--cookie-bas,20px) - 10px);
    max-width:none;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .cookie-banner__toggle{
    justify-content:center;
    min-height:44px;               /* cible tactile, recommandation WCAG */
    font-size:14px;
  }
  .cookie-banner__info{text-align:left}
  .cookie-banner__buttons{flex-direction:column;width:100%}
  .cookie-banner__btn{width:100%}
  .cookie-mini{left:10px;bottom:calc(var(--cookie-bas,20px) - 10px)}
}