@charset "utf-8";
/* ==========================================================================
   EGCCLIM — pied de page, fenêtres d'information, cookies, page contact,
   pages légales.

   Feuille ADDITIVE. Elle est chargée APRÈS la feuille intégrée de
   preview.html et ne redéfinit aucun sélecteur existant : toutes les
   classes sont préfixées (.site-footer, .legal-dialog, .cookie-banner,
   .cookie-settings, .contact-page, .contact-form, .contact-trust,
   .legal-page). Elle réutilise les variables du système de design déjà
   en place ainsi que les familles Manrope et Inter.

   Aucune section de la page d'atterrissage n'est ciblée ici.
   ========================================================================== */

:root{
  /* Décalage bas réservé à la barre de commande collante : 0 par défaut
     (les pages secondaires n'en ont pas). */
  --egc-bottom-offset:0px;

  /* Encre du pied de page : un cran plus soutenue que --texte (#26405C),
     pour que rien n'y paraisse désactivé. */
  --footer-heading:#102f4d;
  --footer-text:#29445f;
  --footer-link:#1d3a57;
  --footer-hover:#0075b4;

  --egc-line-cyan:rgba(0,157,228,.22);
  --egc-surface:#FBFDFF;
  --egc-tap:44px;
  /* Courbe d'apparition commune aux fenêtres et aux accordéons. */
  --egc-ease:cubic-bezier(.16,1,.3,1);
}

/* La page qui porte la barre de commande collante déclare son décalage
   ici : --obar-h vit dans la feuille intégrée de preview.html et suit
   déjà ses propres paliers, le bandeau cookies en hérite sans mesure JS. */
body[data-egc-has-obar]{--egc-bottom-offset:var(--obar-h, 72px)}

/* ==========================================================================
   0. LOGO EGCCLIM — en-tête et pied de page

   Le fichier est détouré de ses marges transparentes : rapport 1567x254,
   soit 6,17:1. Il est dimensionné par la LARGEUR, la hauteur suit. Le
   object-fit:contain garantit qu'aucun recadrage ni étirement n'est
   possible, même si une règle héritée imposait une hauteur.
   ========================================================================== */
.egc-logo{
  display:block;
  width:100%;height:auto;
  max-width:none;
  object-fit:contain;
  background:none;                 /* la transparence du PNG est conservée */
}

/* ==========================================================================
   1. PIED DE PAGE
   ========================================================================== */
.site-footer{
  position:relative;
  /* Dégradé blanc vers bleu glacé : la transition avec la section qui
     précède est insensible, le bas s'installe dans le bleu. */
  background:linear-gradient(180deg, #FFFFFF 0%, #F4F9FD 38%, #EDF5FB 100%);
  border-top:1px solid var(--egc-line-cyan);
  color:var(--footer-text);
  font-size:16px;
  padding:52px 0 30px;
  /* Pleine largeur de la fenêtre, quoi qu'il arrive : aucune carte
     étroite, aucun débordement horizontal. */
  width:100%;
  overflow-x:clip;
}
/* Lueur cyan très douce le long du filet supérieur. Décorative, elle ne
   capture jamais le pointeur. */
.site-footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:220px;
  background:
    radial-gradient(90% 100% at 50% 0%,
      rgba(0,157,228,.13) 0%,
      rgba(0,157,228,.05) 45%,
      rgba(0,157,228,0) 75%);
  pointer-events:none;
}
.site-footer > .wrap{position:relative}

.site-footer__grid{display:grid;gap:30px}

/* ---- Colonne 1 : identité ----
   Largeur FIXE et non max-width : le logo est en chargement différé, et
   un inline-block ajusté au contenu se replierait à 0 tant que l'image
   n'est pas arrivée. Le rapport porté par width/height réserve la
   hauteur, et rien ne saute au chargement. */
.site-footer__brand{
  display:block;
  margin:0 0 16px;
  width:210px;max-width:100%;
}
.site-footer__brand:hover{text-decoration:none}

.site-footer__tagline{
  font-family:var(--font-heading);
  font-size:17px;font-weight:700;letter-spacing:-.012em;
  color:var(--footer-heading);
  margin:0 0 14px;line-height:1.35;
}
.site-footer__rge{
  display:inline-flex;align-items:center;gap:9px;
  margin:0 0 16px;padding:8px 14px 8px 11px;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(0,157,228,.09));
  border:1px solid rgba(0,157,228,.28);
  border-radius:999px;
  font-size:14px;font-weight:600;line-height:1.35;
  color:var(--footer-heading);
  box-shadow:0 1px 2px rgba(10,37,64,.05);
}
.site-footer__rge svg{flex:none;color:var(--bleu-action)}
.site-footer__address{
  margin:0;font-style:normal;font-size:16px;line-height:1.65;
  color:var(--footer-text);
}
.site-footer__address a{
  display:inline-block;
  color:var(--footer-link);font-weight:500;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color 240ms var(--egc-ease), border-color 240ms var(--egc-ease);
}
.site-footer__extico{
  display:inline-block;vertical-align:-2px;margin-left:6px;color:var(--bleu-vif);
  transition:transform 240ms var(--egc-ease);
}

/* ---- Titres de colonnes / boutons d'accordéon ----
   Le <h2> ne porte aucune taille propre : c'est le bouton qu'il contient
   qui fixe l'échelle. Sans cette remise à plat, la règle globale
   h2{font-size:clamp(1.9rem…)} gonflerait la boîte du titre. */
.site-footer__h{margin:0;font-size:1rem;line-height:1.2}

.site-footer__toggle{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;min-height:var(--egc-tap);
  margin:0;padding:12px 0;
  background:none;border:0;border-bottom:1px solid rgba(16,47,77,.14);
  text-align:left;cursor:pointer;
  font-family:var(--font-body);
  font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:#183653;
  transition:color 240ms var(--egc-ease);
}
/* Signe plus/moins dessiné au trait : la barre verticale disparaît à
   l'ouverture, il ne reste qu'un moins. Aucune image, aucune police. */
.site-footer__pm{
  position:relative;flex:none;width:15px;height:15px;
  color:var(--bleu-action);
}
.site-footer__pm::before,
.site-footer__pm::after{
  content:"";position:absolute;left:50%;top:50%;
  background:currentColor;border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform 260ms var(--egc-ease), opacity 200ms ease;
}
.site-footer__pm::before{width:15px;height:2px}
.site-footer__pm::after{width:2px;height:15px}
.site-footer__toggle[aria-expanded="true"] .site-footer__pm::after{
  transform:translate(-50%,-50%) scaleY(0);opacity:0;
}

/* ---- Listes de liens ---- */
.site-footer__list{
  list-style:none;margin:0;padding:10px 0 6px;
  display:grid;gap:2px;
}
.site-footer__list[hidden]{display:none}

/* ---- Le lien de pied de page ----
   Un seul jeu de règles pour les <a> et les <button> : rien ne distingue
   visuellement un lien d'un déclencheur de fenêtre. Encre soutenue,
   graisse 500, filet cyan qui se déploie depuis la gauche et flèche
   discrète qui n'apparaît qu'au survol. */
.site-footer__link{
  position:relative;
  display:inline-flex;align-items:center;gap:0;
  min-height:var(--egc-tap);
  padding:3px 0;margin:0;
  background:none;border:0;
  font-family:var(--font-body);
  font-size:16px;font-weight:500;line-height:1.65;
  color:var(--footer-link);
  text-align:left;text-decoration:none;
  cursor:pointer;
  transition:color 240ms var(--egc-ease), transform 240ms var(--egc-ease);
}
.site-footer__link > span{
  position:relative;
  /* Le filet est un pseudo-élément et non un text-decoration : il peut
     s'animer de 0 à 100% depuis la gauche. */
  padding-bottom:2px;
}
.site-footer__link > span::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:var(--bleu-vif);border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform 260ms var(--egc-ease);
}
/* Flèche minuscule, révélée seulement au survol : elle n'occupe aucune
   place au repos, la colonne ne bouge donc pas. */
.site-footer__link::after{
  content:"";
  flex:none;width:0;height:11px;margin-left:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230075b4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h12M12 6l6 6-6 6'/></svg>") center/contain no-repeat;
  opacity:0;
  transition:width 240ms var(--egc-ease), margin-left 240ms var(--egc-ease),
             opacity 240ms var(--egc-ease);
}

@media (hover:hover) and (pointer:fine){
  .site-footer__link:hover{color:var(--footer-hover);text-decoration:none;transform:translateX(2px)}
  .site-footer__link:hover > span::after{transform:scaleX(1)}
  .site-footer__link:hover::after{width:11px;margin-left:8px;opacity:1}
  .site-footer__address a:hover{color:var(--footer-hover);border-bottom-color:var(--bleu-vif)}
  .site-footer__address a:hover .site-footer__extico{transform:translate(1px,-1px)}
  .site-footer__toggle:hover{color:var(--footer-hover)}
}
.site-footer__link:focus-visible,
.site-footer__toggle:focus-visible,
.site-footer__brand:focus-visible,
.site-footer__address a:focus-visible{
  outline:3px solid var(--bleu-vif);outline-offset:3px;border-radius:5px;
}

/* ---- Bas de page légal : centré sur tous les paliers ---- */
.site-footer__bottom{
  margin-top:26px;padding-top:24px;
  border-top:1px solid rgba(16,47,77,.12);
  text-align:center;
  color:var(--footer-text);
}
.site-footer__bottom p{
  max-width:64ch;margin-inline:auto;
  margin-block:0 8px;
  line-height:1.65;
}
.site-footer__bottom p:last-child{margin-bottom:0}
.site-footer__copy{font-size:15px;font-weight:600;color:var(--footer-heading)}
.site-footer__ids{font-size:14.5px}
/* À peine plus petite que les deux autres, jamais estompée. */
.site-footer__mark{font-size:14px;color:var(--footer-text)}

/* ---- Repli sans JavaScript ---- */
.site-footer__nojs{
  margin-top:26px;padding-top:20px;border-top:1px solid rgba(16,47,77,.12);
}
.site-footer__nojs h3{
  font-family:var(--font-heading);
  font-size:13px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--footer-heading);margin:0 0 12px;font-weight:700;
}
.site-footer__nojs ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 22px;
}
.site-footer__nojs a{color:var(--bleu-action);font-weight:500}

/* ---- Palier MOBILE (sous 900px) ----
   Le bloc entreprise est centré, les accordéons occupent toute la
   largeur intérieure, et rien n'est enfermé dans une carte. */
@media (max-width:899px){
  .site-footer{padding:44px 0 26px}
  .site-footer > .wrap{padding-inline:22px}
  .site-footer__col--brand{text-align:center}
  .site-footer__brand{
    /* Un cran plus grand qu'en colonne : c'est le seul repère de marque
       de la vue mobile. */
    width:236px;margin-inline:auto;margin-bottom:18px;
  }
  .site-footer__address{text-align:center}
  .site-footer__grid{gap:22px}
  .site-footer__col:not(.site-footer__col--brand){margin:0}
  .site-footer__toggle{padding:14px 2px}
  .site-footer__list{padding:6px 2px 12px}
}

/* ---- Paliers larges ---- */
@media (min-width:620px) and (max-width:899px){
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:22px 34px}
  .site-footer__col--brand{grid-column:1 / -1}
}
@media (min-width:900px){
  .site-footer{padding:74px 0 34px}
  .site-footer__grid{grid-template-columns:1.35fr 1fr 1fr;gap:56px}
  .site-footer__brand{width:230px}

  /* Au-dessus de 900px les colonnes ne sont plus des accordéons : les
     boutons restent des boutons (même arbre d'accessibilité sur les deux
     paliers) mais ils sont inertes, sans signe ni filet. */
  .site-footer__toggle{
    cursor:default;pointer-events:none;
    border-bottom:0;padding:0;min-height:0;margin-bottom:16px;
  }
  .site-footer__pm{display:none}
  .site-footer__list{padding:0;gap:6px}
  .site-footer__link{min-height:0;padding:5px 0}
  .site-footer__bottom{margin-top:52px;padding-top:28px}
}

/* ---- Ouverture des accordéons : les liens montent et se révèlent ----
   Portée par une animation et non par une transition : une liste qui
   passe de [hidden] à visible ne peut pas transitionner. */
@media (prefers-reduced-motion:no-preference){
  .site-footer__list:not([hidden]) .site-footer__link{
    animation:egcFootLink 300ms var(--egc-ease) both;
  }
  .site-footer__list li:nth-child(1) .site-footer__link{animation-delay:0ms}
  .site-footer__list li:nth-child(2) .site-footer__link{animation-delay:35ms}
  .site-footer__list li:nth-child(3) .site-footer__link{animation-delay:70ms}
  .site-footer__list li:nth-child(4) .site-footer__link{animation-delay:105ms}
  .site-footer__list li:nth-child(5) .site-footer__link{animation-delay:140ms}
  @keyframes egcFootLink{
    from{opacity:0;transform:translateY(7px)}
    to{opacity:1;transform:none}
  }
  /* Sur grand écran les listes sont ouvertes en permanence : rejouer
     l'entrée à chaque bascule de média serait du bruit. */
  @media (min-width:900px){
    .site-footer__list .site-footer__link{animation:none}
  }
}

/* ==========================================================================
   2. FENÊTRES D'INFORMATION (livraison, retours, garantie, cookies)

   Élément <dialog> natif ouvert par showModal() : la couche supérieure du
   navigateur passe au-dessus de l'en-tête collant (z-index 50), de la
   barre de commande (60) et du calque plein écran (200) sans qu'aucun
   z-index n'ait à être inventé.
   ========================================================================== */
.legal-dialog{
  padding:0;border:0;background:transparent;
  width:min(760px, calc(100vw - 40px));
  max-width:none;max-height:82vh;
  overflow:visible;
  color:var(--texte);
}
.legal-dialog::backdrop{
  background:rgba(4,25,52,.55);
  opacity:0;
}
.legal-dialog[open]::backdrop{opacity:1}

.legal-dialog__box{
  position:relative;
  display:flex;flex-direction:column;
  max-height:82vh;
  background:var(--egc-surface);
  border:1px solid rgba(0,157,228,.30);
  border-radius:22px;
  /* Ombre en couches + halo cyan : la fenêtre se détache du fond sans
     paraître lourde. */
  box-shadow:
    0 1px 2px rgba(4,32,63,.06),
    0 12px 28px rgba(4,32,63,.14),
    0 44px 90px rgba(4,32,63,.26),
    0 0 0 6px rgba(0,157,228,.07);
  overflow:hidden;
}

/* ---- En-tête : pastille d'icône, sur-titre, titre, accroche ---- */
.legal-dialog__head{
  position:relative;flex:none;
  padding:28px 68px 22px 28px;
  background:linear-gradient(180deg, #FFFFFF 0%, #F5FAFE 100%);
  border-bottom:1px solid rgba(0,157,228,.16);
}
/* Filet cyan sous l'en-tête : l'accent de couleur de chaque fenêtre. */
.legal-dialog__head::after{
  content:"";position:absolute;left:28px;right:28px;bottom:-1px;height:2px;
  background:linear-gradient(90deg, var(--bleu-vif), rgba(0,157,228,0));
  border-radius:2px;
}
.legal-dialog__tile{
  display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;margin:0 0 14px;
  border-radius:15px;
  background:linear-gradient(160deg, #E8F4FC 0%, #D8ECF9 100%);
  border:1px solid rgba(0,157,228,.24);
  color:var(--bleu-action);
}
.legal-dialog__eyebrow{
  margin:0 0 6px;
  font-family:var(--font-heading);
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--bleu-action);line-height:1.2;
}
.legal-dialog__title{
  font-family:var(--font-heading);
  font-size:clamp(1.35rem,2.7vw,1.72rem);
  font-weight:800;letter-spacing:-.03em;line-height:1.13;
  color:var(--texte-fort);margin:0;
}
.legal-dialog__lede{
  margin:10px 0 0;font-size:16px;line-height:1.55;color:var(--footer-text);
  max-width:52ch;
}
.legal-dialog__meta{
  margin:9px 0 0;font-size:14px;color:var(--footer-text);line-height:1.5;
}
.legal-dialog__close{
  position:absolute;top:18px;right:18px;
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--egc-tap);height:var(--egc-tap);
  padding:0;background:#fff;border:1px solid rgba(0,157,228,.28);
  border-radius:13px;cursor:pointer;color:var(--texte-fort);
  transition:background-color 240ms var(--egc-ease), color 240ms var(--egc-ease),
             border-color 240ms var(--egc-ease), transform 240ms var(--egc-ease);
}
@media (hover:hover) and (pointer:fine){
  .legal-dialog__close:hover{
    background:var(--bleu-action);color:#fff;border-color:var(--bleu-action);
    transform:rotate(90deg);
  }
}
.legal-dialog__close:focus-visible{outline:3px solid var(--bleu-vif);outline-offset:3px}

/* ---- Corps ---- */
.legal-dialog__body{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:24px 28px 30px;
  font-family:var(--font-body);
  font-size:16px;line-height:1.7;
  color:var(--text-body, #294866);
}
.legal-dialog__sec{
  padding:0 0 18px;margin:0 0 18px;
  border-bottom:1px solid rgba(16,47,77,.10);
}
.legal-dialog__sec:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.legal-dialog__body h3{
  font-family:var(--font-heading);
  font-size:1.06rem;font-weight:700;letter-spacing:-.016em;
  color:var(--texte-fort);
  margin:0 0 9px;line-height:1.25;
}
.legal-dialog__body p{margin:0 0 12px}
.legal-dialog__body p:last-child{margin-bottom:0}
.legal-dialog__body ul{margin:0 0 12px;padding-left:20px}
.legal-dialog__body li{margin:0 0 7px}
.legal-dialog__body a{color:var(--bleu-action);font-weight:500}
.legal-dialog__body address{font-style:normal;line-height:1.7}

/* Panneau de mise en avant : le chiffre qui compte se lit d'un coup. */
.legal-dialog__hl{
  display:flex;align-items:center;gap:12px;
  margin:0;padding:14px 16px;
  background:linear-gradient(135deg, #EFF7FD 0%, #E4F1FA 100%);
  border:1px solid rgba(0,157,228,.24);
  border-left:3px solid var(--bleu-vif);
  border-radius:12px;
  font-family:var(--font-heading);
  font-size:1.08rem;font-weight:700;letter-spacing:-.015em;
  color:var(--texte-fort);line-height:1.35;
}
.legal-dialog__hl svg{flex:none;color:var(--bleu-action)}

/* Bouton secondaire visible à l'intérieur d'une fenêtre */
.legal-dialog__action{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 22px;margin:4px 0 0;
  background:#fff;color:var(--bleu-action);
  border:1px solid rgba(0,117,180,.55);border-radius:14px;
  font-family:var(--font-body);
  font-size:16px;line-height:1;font-weight:700;letter-spacing:-.01em;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,117,180,.10);
  transition:background-color 240ms var(--egc-ease), color 240ms var(--egc-ease),
             border-color 240ms var(--egc-ease), transform 240ms var(--egc-ease),
             box-shadow 240ms var(--egc-ease);
}
@media (hover:hover) and (pointer:fine){
  .legal-dialog__action:hover{
    background:var(--bleu-action);color:#fff;border-color:var(--bleu-action);
    transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,117,180,.24);
  }
}
.legal-dialog__action:focus-visible{outline:3px solid var(--bleu-vif);outline-offset:3px}

/* Formulaire de rétractation replié dans la fenêtre « Retours » */
.legal-dialog__panel{
  margin-top:18px;padding:20px;
  background:#F4F9FD;
  border:1px solid rgba(0,157,228,.20);
  border-radius:16px;
}
.legal-dialog__panel[hidden]{display:none}

/* ---- Palier mobile : feuille montante ---- */
@media (max-width:699px){
  .legal-dialog{
    position:fixed;
    left:0;right:0;bottom:0;top:auto;
    width:calc(100% - 20px);max-width:100%;
    max-height:90vh;max-height:90dvh;
    margin:0 10px;
  }
  .legal-dialog__box{
    max-height:90vh;max-height:90dvh;
    border-radius:24px 24px 0 0;
    border-bottom:0;
  }
  .legal-dialog__head{padding:20px 62px 18px 20px}
  .legal-dialog__head::after{left:20px;right:20px}
  .legal-dialog__close{top:14px;right:14px}
  .legal-dialog__tile{width:44px;height:44px;margin-bottom:12px}
  .legal-dialog__body{
    padding:20px 20px 24px;
    /* Encoche et barre de gestes : le dernier paragraphe reste lisible. */
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
  }
  /* Poignée discrète : l'objet se lit comme une feuille, pas comme une
     fenêtre tronquée. */
  .legal-dialog__box::before{
    content:"";display:block;flex:none;
    width:42px;height:4px;margin:9px auto 0;
    border-radius:99px;background:rgba(16,47,77,.18);
  }
}

/* ---- Ouverture et fermeture ---- */
@media (prefers-reduced-motion:no-preference){
  .legal-dialog::backdrop{transition:opacity 300ms ease}
  .legal-dialog[open]{animation:egcDlgIn 340ms var(--egc-ease) both}
  .legal-dialog.is-closing{animation:egcDlgOut 220ms ease-in both}
  .legal-dialog.is-closing::backdrop{opacity:0}

  @keyframes egcDlgIn{
    from{opacity:0;transform:translateY(18px) scale(.97)}
    to{opacity:1;transform:none}
  }
  @keyframes egcDlgOut{
    from{opacity:1;transform:none}
    to{opacity:0;transform:translateY(12px) scale(.985)}
  }

  /* Le contenu de l'en-tête monte juste derrière la fenêtre, très
     légèrement décalé : l'ouverture se lit comme un mouvement unique. */
  .legal-dialog[open] .legal-dialog__tile,
  .legal-dialog[open] .legal-dialog__eyebrow,
  .legal-dialog[open] .legal-dialog__title,
  .legal-dialog[open] .legal-dialog__lede,
  .legal-dialog[open] .legal-dialog__meta{
    animation:egcDlgRise 420ms var(--egc-ease) both;
  }
  .legal-dialog[open] .legal-dialog__eyebrow{animation-delay:50ms}
  .legal-dialog[open] .legal-dialog__title{animation-delay:85ms}
  .legal-dialog[open] .legal-dialog__lede,
  .legal-dialog[open] .legal-dialog__meta{animation-delay:120ms}
  @keyframes egcDlgRise{
    from{opacity:0;transform:translateY(9px)}
    to{opacity:1;transform:none}
  }

  @media (max-width:699px){
    /* En feuille montante, l'entrée est une translation franche depuis le
       bas plutôt qu'une mise à l'échelle. */
    @keyframes egcDlgIn{
      from{opacity:0;transform:translateY(100%)}
      to{opacity:1;transform:none}
    }
    @keyframes egcDlgOut{
      from{opacity:1;transform:none}
      to{opacity:0;transform:translateY(100%)}
    }
    .legal-dialog.is-closing{animation-duration:260ms}
  }
}

/* ==========================================================================
   3. BANDEAU ET RÉGLAGES COOKIES
   ========================================================================== */
.cookie-banner{
  position:fixed;z-index:70;
  left:0;right:0;
  bottom:calc(var(--egc-bottom-offset) + env(safe-area-inset-bottom));
  padding:0 12px 12px;
  pointer-events:none;
}
.cookie-banner[hidden]{display:none}
.cookie-banner__box{
  pointer-events:auto;
  max-width:var(--maxw);margin:0 auto;
  background:linear-gradient(180deg, #FFFFFF 0%, #FAFDFF 100%);
  border:1px solid rgba(0,157,228,.30);
  border-radius:20px;
  box-shadow:
    0 -2px 10px rgba(4,32,63,.05),
    0 22px 54px rgba(4,32,63,.22),
    0 0 0 5px rgba(0,157,228,.06);
  padding:20px;
}
.cookie-banner__title{
  font-family:var(--font-heading);
  font-size:1.06rem;font-weight:800;letter-spacing:-.022em;
  color:var(--texte-fort);margin:0 0 8px;line-height:1.25;
}
.cookie-banner__text{
  margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--footer-text);
  max-width:78ch;
}
.cookie-banner__actions{display:grid;gap:10px}

/* « Tout accepter » et « Tout refuser » partagent strictement le même
   bouton : même surface, même graisse, même contraste. Refuser n'est
   jamais plus coûteux qu'accepter. */
.cookie-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--egc-tap);padding:12px 22px;
  border-radius:14px;border:1px solid transparent;
  font-family:var(--font-body);
  font-size:16px;line-height:1;font-weight:700;letter-spacing:-.01em;
  cursor:pointer;text-align:center;
  transition:background-color 240ms var(--egc-ease), color 240ms var(--egc-ease),
             border-color 240ms var(--egc-ease), box-shadow 240ms var(--egc-ease),
             transform 240ms var(--egc-ease);
}
.cookie-btn--solid{
  background:linear-gradient(135deg,#0a91c6 0%,#0075B4 100%);color:#fff;
  box-shadow:0 8px 20px rgba(0,117,180,.24);
}
.cookie-btn--ghost{
  background:#fff;color:var(--bleu-action);
  border-color:rgba(0,117,180,.55);
  box-shadow:0 2px 8px rgba(0,117,180,.08);
}
.cookie-btn--quiet{
  background:transparent;color:var(--footer-text);
  border-color:rgba(16,47,77,.22);
}
@media (hover:hover) and (pointer:fine){
  .cookie-btn--solid:hover{background:linear-gradient(135deg,#0b9dd6 0%,#00699f 100%);transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,117,180,.30)}
  .cookie-btn--ghost:hover{background:var(--bleu-pale);border-color:var(--bleu-action);transform:translateY(-2px)}
  .cookie-btn--quiet:hover{border-color:var(--bleu-action);color:var(--bleu-action)}
}
.cookie-btn:active{transform:translateY(0) scale(.985)}
.cookie-btn:focus-visible{outline:3px solid var(--bleu-vif);outline-offset:3px}

@media (min-width:760px){
  .cookie-banner{padding:0 20px 20px}
  .cookie-banner__box{
    display:grid;grid-template-columns:1fr auto;align-items:center;gap:26px;
    padding:22px 26px;
  }
  .cookie-banner__text{margin-bottom:0}
  .cookie-banner__actions{
    grid-auto-flow:column;grid-auto-columns:max-content;gap:10px;align-items:center;
  }
}
@media (prefers-reduced-motion:no-preference){
  .cookie-banner:not([hidden]) .cookie-banner__box{
    animation:egcBannerIn 420ms var(--egc-ease) both;
  }
  @keyframes egcBannerIn{
    from{opacity:0;transform:translateY(18px)}
    to{opacity:1;transform:none}
  }
}

/* ---- Panneau de préférences ---- */
.cookie-settings__list{
  list-style:none;margin:0;padding:0;
  display:grid;gap:14px;
}
.cookie-cat{
  display:grid;grid-template-columns:1fr auto;align-items:start;gap:14px;
  padding:16px 18px;
  background:#fff;
  border:1px solid rgba(0,157,228,.20);border-radius:14px;
  box-shadow:0 1px 3px rgba(10,37,64,.05);
}
.cookie-cat__name{
  font-family:var(--font-heading);
  font-size:1rem;font-weight:700;color:var(--texte-fort);
  margin:0 0 4px;line-height:1.3;
}
.cookie-cat__state{
  display:block;font-size:12.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--bleu-action);margin:0 0 8px;
}
.cookie-cat__desc{margin:0;font-size:15px;line-height:var(--leading-small);color:var(--text-body, #294866)}

/* Interrupteur accessible : la case native reste la source de vérité,
   elle est seulement redessinée. */
.cookie-switch{
  position:relative;flex:none;
  display:inline-flex;align-items:center;
  width:56px;height:32px;
}
.cookie-switch input{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer;
}
.cookie-switch__track{
  position:relative;display:block;width:56px;height:32px;
  border-radius:99px;background:#D6E1EC;
  border:1px solid rgba(16,47,77,.14);
  transition:background-color 240ms var(--egc-ease), border-color 240ms var(--egc-ease);
  pointer-events:none;
}
.cookie-switch__track::after{
  content:"";position:absolute;top:3px;left:3px;
  width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(10,37,64,.28);
  transition:transform 260ms var(--egc-ease);
}
.cookie-switch input:checked + .cookie-switch__track{
  background:var(--bleu-action);border-color:var(--bleu-action);
}
.cookie-switch input:checked + .cookie-switch__track::after{transform:translateX(24px)}
.cookie-switch input:focus-visible + .cookie-switch__track{
  outline:3px solid var(--bleu-vif);outline-offset:3px;
}
.cookie-switch input:disabled{cursor:not-allowed}
.cookie-switch input:disabled + .cookie-switch__track{
  background:var(--bleu-vif);border-color:var(--bleu-vif);opacity:.55;
}
.cookie-switch input:disabled + .cookie-switch__track::after{transform:translateX(24px)}

.cookie-settings__actions{
  display:grid;gap:10px;
  margin-top:22px;padding-top:20px;border-top:1px solid rgba(16,47,77,.12);
}
@media (min-width:560px){
  .cookie-settings__actions{grid-auto-flow:column;grid-auto-columns:1fr}
}
.cookie-settings__saved{
  margin:14px 0 0;font-size:15px;font-weight:600;color:var(--vert-fort);
}
.cookie-settings__saved[hidden]{display:none}
.cookie-settings__note{
  margin:16px 0 0;font-size:15px;line-height:var(--leading-small);color:var(--footer-text);
}

/* ==========================================================================
   3 bis. EN-TÊTE DES PAGES SECONDAIRES — composant unique

   contact.html, mentions-legales.html, cgv.html et confidentialite.html
   partagent EXACTEMENT ce bloc : même fond, même bouton de retour, même
   sur-titre, même titre, même filet cyan, même accroche, même date.
   Seuls le texte du sur-titre, le titre, l'accroche et la présence de la
   date changent d'une page à l'autre.

   La page d'atterrissage (preview.html) n'utilise rien de tout ceci :
   son hero produit est intact.
   ========================================================================== */
.subpage-hero{
  position:relative;
  padding:34px 0 40px;
  background:linear-gradient(180deg, #F2F9FE 0%, #F8FCFF 58%, rgba(255,255,255,0) 100%);
  border-bottom:1px solid var(--legal-border);
  overflow:hidden;
}
/* Halo cyan très doux, purement décoratif. */
.subpage-hero::before{
  content:"";position:absolute;left:50%;top:-180px;
  width:min(900px,132%);height:460px;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(0,157,228,.15) 0%, rgba(0,157,228,.05) 46%, rgba(0,157,228,0) 74%);
  pointer-events:none;
}
.subpage-hero > .wrap{position:relative}

/* ---- Retour à l'accueil ----
   Une pastille, jamais un lien de navigateur : même boîte, même ombre et
   même survol sur les quatre pages. */
.subpage-hero__back{
  display:inline-flex;align-items:center;gap:9px;
  min-height:40px;padding:8px 16px 8px 13px;margin:0 0 22px;
  background:#fff;
  border:1px solid var(--legal-border);
  border-radius:999px;
  font-family:var(--font-body);
  font-size:16px;font-weight:700;line-height:1;letter-spacing:-.01em;
  color:var(--legal-blue);text-decoration:none;
  box-shadow:0 1px 2px rgba(16,47,77,.05);
  transition:transform 240ms var(--egc-ease), border-color 240ms var(--egc-ease),
             box-shadow 240ms var(--egc-ease), background-color 240ms var(--egc-ease);
}
.subpage-hero__back svg{flex:none;transition:transform 240ms var(--egc-ease)}
@media (hover:hover) and (pointer:fine){
  .subpage-hero__back:hover{
    background:var(--legal-surface);border-color:var(--legal-cyan);
    text-decoration:none;transform:translateX(-3px);
    box-shadow:0 6px 18px rgba(0,157,228,.18);
  }
  .subpage-hero__back:hover svg{transform:translateX(-3px)}
}
.subpage-hero__back:focus-visible{outline:3px solid var(--legal-cyan);outline-offset:3px}

/* ---- Sur-titre ----
   Même navy soutenu partout : plus jamais cyan sur une page et navy sur
   une autre. */
.subpage-hero__eyebrow{
  margin:0 0 10px;
  font-family:var(--font-body);
  font-size:var(--type-eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  /* Bleu d'action et non le cyan vif : a 13px, #009DE4 ne tient pas le
     contraste sur blanc (3,02:1) alors que #0075B4 atteint 5,0:1. Le
     cyan reste au filet sous le titre et aux accents decoratifs.
     Valeur litterale : les pages secondaires n'ont aucune section
     sombre, il n'y a donc pas de bascule contextuelle a prevoir. */
  color:#0075b4;line-height:1.3;
}

/* ---- Titre ---- */
.subpage-hero__title{
  font-family:var(--font-heading);
  font-size:var(--type-page-title);
  font-weight:800;letter-spacing:-.035em;line-height:var(--leading-title);
  color:#102f4d;
  margin:0;
  /* Largeur maximale en pixels et non en ch : l'unité ch dépend de la
     police réellement chargée, la mesure varierait donc d'une page à
     l'autre selon l'instant du rendu. Ici, les quatre titres partagent
     strictement la même limite. */
  max-width:620px;
  /* Un titre long se replie plutôt que d'être rogné, même à 320px. */
  overflow-wrap:break-word;
}

/* ---- Filet cyan ---- */
.subpage-hero__line{
  width:68px;height:3px;margin:20px 0 0;
  border:0;border-radius:999px;
  background:#009de4;
}

/* ---- Accroche ---- */
.subpage-hero__intro{
  margin:20px 0 0;
  font-family:var(--font-body);
  font-size:var(--type-intro);line-height:var(--leading-intro);
  color:#35536f;max-width:680px;
}

/* ---- Date de mise à jour (pages légales seulement) ---- */
.subpage-hero__date{
  margin:14px 0 0;
  font-size:15px;line-height:1.5;color:var(--legal-muted);
}

@media (min-width:900px){
  .subpage-hero{padding:44px 0 52px}
}
@media (max-width:430px){
  /* Le titre garde toute la largeur disponible sur petit écran : aucune
     mesure en ch ne doit le forcer à se replier trop tôt. */
  .subpage-hero__title{max-width:none}
}

/* ---- Entrée, au chargement seulement ----
   Une animation CSS, pas un observateur de défilement : elle ne se
   rejoue jamais quand on remonte la page. Partagée par l'en-tête et par
   les cartes des mentions légales. */
@media (prefers-reduced-motion:no-preference){
  .egc-rise{animation:egcRise 440ms var(--egc-ease) both}
  .egc-rise--1{animation-delay:40ms}
  .egc-rise--2{animation-delay:100ms}
  .egc-rise--3{animation-delay:160ms}
  .egc-rise--4{animation-delay:215ms}
  .egc-rise--5{animation-delay:285ms}
  .egc-rise--6{animation-delay:355ms}
  .egc-rise--7{animation-delay:425ms}
  .egc-rise--8{animation-delay:495ms}
  @keyframes egcRise{
    from{opacity:0;transform:translateY(14px)}
    to{opacity:1;transform:none}
  }
}

/* ==========================================================================
   3 ter. BARRE DE COMMANDE COLLANTE — compléments

   Le composant lui-même (.obar) vient de la feuille de la page produit,
   reprise verbatim dans egcclim-base.css. Ici, seulement deux ajouts.
   ========================================================================== */

/* Sur les pages secondaires, le bloc produit est un lien vers la page
   produit : il ne doit pas se souligner ni virer au bleu de lien. */
a.obar__left{color:inherit;text-decoration:none}
a.obar__left:hover{text-decoration:none}
a.obar__left:focus-visible{outline:3px solid var(--bleu-vif);outline-offset:3px;border-radius:10px}
@media (hover:hover) and (pointer:fine){
  a.obar__left .obar__name{transition:color 240ms var(--egc-ease)}
  a.obar__left:hover .obar__name{color:var(--bleu-action)}
}

/* Menu mobile ouvert : la barre s'efface. Sans cela elle resterait
   allumée et cliquable AU-DESSUS du voile (z-index 60 contre 40), donc
   par-dessus la navigation active. Les fenêtres, elles, passent par la
   couche supérieure du navigateur : leur fond couvre déjà la barre et la
   rend inerte, aucune règle n'est nécessaire pour elles. */
body:has(#nav-panel.is-open) .obar{
  opacity:0;transform:translateY(20px);pointer-events:none;
}

/* ==========================================================================
   4. PAGE CONTACT
   ========================================================================== */
.contact-page{padding:0 0 8px}

.contact-page__grid{display:grid;gap:30px;padding-top:34px}

.contact-page__aside h2{
  font-size:1.45rem;margin:0 0 14px;letter-spacing:-.026em;
}
.contact-page__intro{
  margin:0 0 22px;font-family:var(--font-body);
  font-size:var(--type-intro);line-height:var(--leading-intro);
  color:var(--text-body, #294866);max-width:52ch;
}

/* ---- Carte service client ---- */
.contact-page__mail{
  display:block;margin:0;padding:22px;
  background:linear-gradient(150deg, #F3FAFE 0%, #E6F2FB 100%);
  border:1px solid rgba(0,157,228,.30);
  border-radius:18px;
  box-shadow:0 2px 6px rgba(10,37,64,.05), 0 14px 30px rgba(10,37,64,.07);
  transition:transform 260ms var(--egc-ease), box-shadow 260ms var(--egc-ease),
             border-color 260ms var(--egc-ease);
}
@media (hover:hover) and (pointer:fine){
  .contact-page__mail:hover{
    transform:translateY(-3px);border-color:rgba(0,157,228,.5);
    box-shadow:0 4px 10px rgba(10,37,64,.06), 0 20px 40px rgba(10,37,64,.12);
  }
}
.contact-page__mailico{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:0 0 14px;
  border-radius:13px;
  background:#fff;border:1px solid rgba(0,157,228,.26);
  color:var(--bleu-action);
  box-shadow:0 2px 6px rgba(0,117,180,.10);
}
.contact-page__mail dt{
  font-family:var(--font-heading);
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--bleu-action);margin:0 0 6px;
}
.contact-page__mail dd{
  margin:0;
  font-family:var(--font-heading);
  font-size:clamp(1.02rem,2.4vw,1.22rem);font-weight:700;letter-spacing:-.02em;
  /* Une adresse longue se coupe plutôt que de pousser la page. */
  overflow-wrap:anywhere;
}
.contact-page__mail dd a{
  display:inline-flex;align-items:center;min-height:var(--egc-tap);
  color:var(--bleu-action);
  border-bottom:1.5px solid transparent;text-decoration:none;
  transition:border-color 240ms var(--egc-ease);
}
@media (hover:hover) and (pointer:fine){
  .contact-page__mail dd a:hover{border-bottom-color:var(--bleu-vif);text-decoration:none}
}
.contact-page__hours{
  margin:18px 0 0;font-size:15px;line-height:1.6;color:var(--footer-text);
}

@media (min-width:900px){
  /* Colonnes rééquilibrées et alignées par le haut. */
  .contact-page__grid{
    grid-template-columns:0.78fr 1.22fr;gap:48px;align-items:start;
    padding-top:44px;
  }
  .contact-page__aside{padding-top:4px}
}

/* ==========================================================================
   5. FORMULAIRE DE CONTACT
   ========================================================================== */
.contact-form{
  background:linear-gradient(180deg, #FFFFFF 0%, #FCFDFF 100%);
  border:1px solid rgba(0,157,228,.22);
  border-radius:20px;
  box-shadow:
    0 1px 3px rgba(10,37,64,.05),
    0 16px 38px rgba(10,37,64,.09);
  padding:26px 22px 28px;
}
.contact-form__row{margin:0 0 20px}
.contact-form__row:last-of-type{margin-bottom:0}
.contact-form__label{
  display:block;margin:0 0 8px;
  font-size:15px;font-weight:600;color:var(--footer-heading);line-height:1.4;
}
.contact-form__req{
  color:#C0362C;margin-left:3px;font-weight:700;
}
.contact-form__opt{
  font-weight:400;color:var(--footer-text);font-size:13.5px;margin-left:6px;
}
.contact-form__input,
.contact-form__select,
.contact-form__textarea{
  display:block;width:100%;
  min-height:var(--egc-tap);
  padding:12px 14px;
  font:inherit;font-size:16px;line-height:1.5;
  color:var(--texte-fort);
  background:#F9FCFE;
  border:1px solid #C3D5E4;
  border-radius:12px;
  transition:border-color 240ms var(--egc-ease), box-shadow 240ms var(--egc-ease),
             background-color 240ms var(--egc-ease);
}
.contact-form__textarea{min-height:150px;resize:vertical}
.contact-form__select{
  /* Chevron dessiné en CSS : aucune bibliothèque d'icônes ajoutée. */
  appearance:none;-webkit-appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2329445f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px 18px;
}
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus{
  outline:0;background:#fff;border-color:var(--bleu-action);
  box-shadow:0 0 0 4px rgba(0,157,228,.18);
}
.contact-form__input:focus-visible,
.contact-form__select:focus-visible,
.contact-form__textarea:focus-visible{
  outline:3px solid var(--bleu-vif);outline-offset:2px;
}
.contact-form__input[aria-invalid="true"],
.contact-form__select[aria-invalid="true"],
.contact-form__textarea[aria-invalid="true"]{
  border-color:#C0362C;background:#FFFAF9;
}
.contact-form__error{
  display:block;margin:8px 0 0;
  font-size:14px;font-weight:600;line-height:1.5;color:#A8241B;
}
.contact-form__error:empty{display:none}

.contact-form__check{
  display:flex;align-items:flex-start;gap:12px;
  margin:22px 0;padding:16px;
  background:#F5FAFD;border:1px solid rgba(0,157,228,.18);border-radius:14px;
  font-size:15px;line-height:1.6;color:var(--footer-text);
}
.contact-form__check input{
  flex:none;width:22px;height:22px;margin:2px 0 0;
  accent-color:var(--bleu-action);cursor:pointer;
}
.contact-form__check input:focus-visible{outline:3px solid var(--bleu-vif);outline-offset:3px}
.contact-form__check label{cursor:pointer}
/* Le lien de confidentialité vit dans une phrase : il se lit comme un
   lien soigné, jamais comme un lien de navigateur par défaut. */
.contact-form__inline{
  color:var(--bleu-action);font-weight:600;text-decoration:none;
  border-bottom:1.5px solid rgba(0,157,228,.45);
  transition:color 240ms var(--egc-ease), border-color 240ms var(--egc-ease);
}
@media (hover:hover) and (pointer:fine){
  .contact-form__inline:hover{color:#005C90;border-bottom-color:var(--bleu-vif);text-decoration:none}
}
.contact-form__inline:focus-visible{outline:3px solid var(--bleu-vif);outline-offset:2px;border-radius:3px}

/* Piège à robots : hors flux, hors tabulation, hors lecture d'écran. */
.contact-form__hp{
  position:absolute !important;left:-9999px !important;
  width:1px;height:1px;overflow:hidden;
}

/* ---- Bouton d'envoi : bleu d'action en dégradé, sans flèche ---- */
.contact-form__submit{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;min-height:54px;padding:14px 30px;
  background:linear-gradient(135deg,#0a91c6 0%,#0075B4 100%);
  color:#fff;border:1px solid rgba(4,119,166,.28);border-radius:15px;
  font-family:var(--font-body);
  font-size:16px;line-height:1;font-weight:700;letter-spacing:-.01em;cursor:pointer;
  box-shadow:
    0 10px 24px rgba(0,117,180,.24),
    inset 0 1px 0 rgba(255,255,255,.20);
  transition:transform 260ms var(--egc-ease), background 260ms var(--egc-ease),
             box-shadow 260ms var(--egc-ease);
}
.contact-form__submit::after{content:none}      /* aucune flèche héritée */
@media (hover:hover) and (pointer:fine){
  .contact-form__submit:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg,#0b9dd6 0%,#00699f 100%);
    box-shadow:
      0 16px 32px rgba(0,117,180,.30),
      0 0 0 5px rgba(0,157,228,.14),
      inset 0 1px 0 rgba(255,255,255,.22);
  }
}
.contact-form__submit:active{transform:translateY(0) scale(.986);box-shadow:0 6px 14px rgba(0,117,180,.22)}
.contact-form__submit:focus-visible{outline:3px solid var(--bleu-vif);outline-offset:3px}

.contact-form__status{
  margin:18px 0 0;padding:14px 16px;
  border-radius:12px;
  font-size:15px;line-height:1.6;
  background:#F4F9FD;
  border:1px solid rgba(0,157,228,.22);
  border-left:3px solid var(--bleu-vif);
  color:var(--footer-text);
}
.contact-form__status:empty{display:none}
.contact-form__status strong{color:var(--texte-fort)}
.contact-form__note{
  margin:16px 0 0;font-size:15px;line-height:var(--leading-small);color:var(--footer-text);
}

@media (min-width:620px){
  .contact-form{padding:32px 30px 34px}
  .contact-form__pair{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
  .contact-form__submit{width:auto;min-width:260px}
}

/* ==========================================================================
   6. BANDEAU DE RÉASSURANCE
   ========================================================================== */
.contact-trust{
  position:relative;
  background:linear-gradient(180deg, #F4FAFE 0%, #EAF4FB 100%);
  border-top:1px solid var(--egc-line-cyan);
  border-bottom:1px solid var(--egc-line-cyan);
  padding:32px 0;
  margin-top:56px;
}
.contact-trust__grid{
  display:grid;gap:14px;
  grid-template-columns:1fr;
  list-style:none;margin:0;padding:0;
}
.contact-trust__item{
  display:flex;align-items:center;gap:15px;
  height:100%;                                 /* hauteurs égales */
  padding:18px 20px;
  background:linear-gradient(180deg, #FFFFFF 0%, #FAFDFF 100%);
  border:1px solid rgba(0,157,228,.22);
  border-radius:16px;
  box-shadow:0 1px 3px rgba(10,37,64,.05), 0 8px 20px rgba(10,37,64,.05);
  transition:transform 260ms var(--egc-ease), box-shadow 260ms var(--egc-ease),
             border-color 260ms var(--egc-ease);
}
@media (hover:hover) and (pointer:fine){
  .contact-trust__item:hover{
    transform:translateY(-4px);border-color:rgba(0,157,228,.42);
    box-shadow:
      0 2px 6px rgba(10,37,64,.06),
      0 16px 34px rgba(10,37,64,.11),
      0 0 0 5px rgba(0,157,228,.07);
  }
}
.contact-trust__ico{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:14px;
  background:linear-gradient(160deg, #E9F4FC 0%, #D9EDFA 100%);
  border:1px solid rgba(0,157,228,.22);
  color:var(--bleu-action);
}
.contact-trust__t{
  display:block;
  font-family:var(--font-heading);
  font-size:15.5px;font-weight:700;letter-spacing:-.014em;
  color:var(--footer-heading);line-height:1.3;margin:0 0 3px;
}
.contact-trust__d{
  display:block;font-size:14px;line-height:1.45;color:var(--footer-text);margin:0;
}
@media (min-width:520px){
  .contact-trust__grid{grid-template-columns:1fr 1fr;gap:16px}
}
@media (min-width:900px){
  .contact-trust{padding:38px 0;margin-top:72px}
  .contact-trust__grid{grid-template-columns:repeat(4,1fr);gap:18px}
  .contact-trust__item{
    flex-direction:column;align-items:flex-start;gap:14px;padding:24px 22px;
  }
}

/* ==========================================================================
   7. PAGES LÉGALES (mentions-legales, cgv, confidentialite)
   Des pages à part entière, jamais des fenêtres modales.
   ========================================================================== */
.legal-page{padding:0 0 20px}

/* Largeur de lecture confortable, jamais pleine page. */
.legal-page__body{
  max-width:860px;
  padding:38px 0 0;
  font-family:var(--font-body);
  font-size:17px;line-height:var(--leading-legal);
  color:var(--text-legal, #2d4a66);
}
.legal-page__sec{
  padding:0 0 26px;margin:0 0 26px;
  border-bottom:1px solid rgba(16,47,77,.10);
  scroll-margin-top:calc(var(--hh, 88px) + 20px);
}
.legal-page__sec:last-child{border-bottom:0;margin-bottom:0}
.legal-page__body h2{
  font-size:1.32rem;letter-spacing:-.024em;
  color:var(--texte-fort);margin:0 0 12px;line-height:1.25;
}
.legal-page__body h3{
  font-size:1.04rem;font-weight:700;letter-spacing:-.014em;
  color:var(--texte-fort);margin:22px 0 8px;
}
.legal-page__body p{margin:0 0 14px}
.legal-page__body p:last-child{margin-bottom:0}
.legal-page__body ul{margin:0 0 14px;padding-left:22px}
.legal-page__body li{margin:0 0 8px}
.legal-page__body a{color:var(--bleu-action);font-weight:500}
.legal-page__body address{font-style:normal;line-height:1.75}
.legal-page__body strong{color:var(--footer-heading)}

/* Encadré d'identité en tête des mentions légales */
.legal-page__card{
  padding:22px 24px;margin:0 0 22px;
  background:linear-gradient(150deg, #F5FAFE 0%, #E9F3FB 100%);
  border:1px solid rgba(0,157,228,.24);
  border-left:3px solid var(--bleu-vif);
  border-radius:16px;
}
.legal-page__card p:last-child{margin-bottom:0}

/* ---- Sommaire des CGV ---- */
.legal-page__toc{
  padding:20px 22px;margin:0 0 30px;
  background:#F6FAFD;
  border:1px solid rgba(0,157,228,.20);
  border-radius:16px;
}
.legal-page__toc h2{
  font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;
  margin:0 0 14px;color:var(--footer-heading);
}
.legal-page__toc ol{
  margin:0;padding-left:20px;
  font-size:15px;line-height:1.6;
  columns:2;column-gap:26px;
}
.legal-page__toc li{margin:0 0 7px;break-inside:avoid}
.legal-page__toc a{
  color:var(--footer-link);font-weight:500;text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color 240ms var(--egc-ease), border-color 240ms var(--egc-ease);
}
@media (hover:hover) and (pointer:fine){
  .legal-page__toc a:hover{color:var(--footer-hover);border-bottom-color:var(--bleu-vif);text-decoration:none}
}
@media (max-width:560px){
  .legal-page__toc ol{columns:1}
}

/* Sur grand écran, le sommaire des CGV devient une colonne collante. */
@media (min-width:1060px){
  .legal-page__layout{
    display:grid;grid-template-columns:250px minmax(0,1fr);
    gap:52px;align-items:start;padding-top:38px;
  }
  .legal-page__layout .legal-page__body{padding-top:0}
  .legal-page__toc{
    position:sticky;top:calc(var(--hh, 88px) + 20px);
    margin:0;max-height:calc(100vh - var(--hh, 88px) - 48px);
    overflow-y:auto;overscroll-behavior:contain;
  }
  .legal-page__toc ol{columns:1;font-size:14.5px}
}

/* ==========================================================================
   8. REPLI SANS JAVASCRIPT
   Les fenêtres redeviennent des sections statiques empilées en fin de
   page : leur contenu reste atteignable même si le script échoue. Les
   textes légaux, eux, sont désormais de vraies pages : ils n'ont jamais
   dépendu de JavaScript.
   ========================================================================== */
.egc-legal-fallback{
  display:none;
  padding:48px 0 0;
}
.egc-legal-fallback > .wrap > h2{font-size:1.6rem;margin-bottom:8px}
.egc-legal-fallback > .wrap > p{color:var(--footer-text);margin-bottom:8px}

/* ==========================================================================
   9. MENTIONS LÉGALES — présentation dédiée

   Seule cette page utilise ces règles (.ml-*). cgv.html et
   confidentialite.html gardent la présentation .legal-page.
   Contenu strictement inchangé : seule sa mise en forme évolue.
   ========================================================================== */
:root{
  --legal-heading:#102f4d;
  --legal-text:#29445f;
  --legal-muted:#55708b;
  --legal-blue:#0075b4;
  --legal-cyan:#009de4;
  --legal-surface:#f5faff;
  --legal-border:#d6e8f4;
}

.ml{padding:0 0 20px;color:var(--legal-text)}

/* ---- Grille de cartes ---- */
.ml-grid{
  display:grid;gap:20px;
  padding:34px 0 0;
}

.ml-card{
  position:relative;
  padding:26px 22px;
  background:linear-gradient(180deg, #FFFFFF 0%, var(--legal-surface) 100%);
  border:1px solid var(--legal-border);
  border-radius:20px;
  box-shadow:
    0 1px 2px rgba(16,47,77,.04),
    0 8px 20px rgba(16,47,77,.05),
    0 22px 44px rgba(16,47,77,.04);
}
.ml-card__head{
  display:flex;align-items:center;gap:14px;
  margin:0 0 18px;
}
.ml-ico{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;
  background:linear-gradient(160deg, #E9F4FC 0%, #D8ECF9 100%);
  border:1px solid rgba(0,157,228,.24);
  color:var(--legal-blue);
}
.ml-card h2{
  font-size:1.24rem;letter-spacing:-.024em;line-height:1.25;
  color:var(--legal-heading);margin:0;
}
.ml-card p{
  margin:0 0 13px;font-family:var(--font-body);
  font-size:17px;line-height:var(--leading-legal);color:var(--text-legal, #2d4a66);
}
.ml-card p:last-child{margin-bottom:0}

/* ---- Fiche d'identité : grille de faits ---- */
.ml-facts{
  display:grid;gap:2px;margin:0;
  grid-template-columns:1fr;
}
.ml-fact{
  padding:14px 16px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--legal-border);
  border-radius:12px;
}
.ml-fact dt{
  margin:0 0 5px;
  font-family:var(--font-heading);
  font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--legal-muted);line-height:1.3;
}
.ml-fact dd{
  margin:0;
  font-size:16.5px;font-weight:600;line-height:1.55;
  color:var(--legal-heading);
  /* Un identifiant long se coupe plutôt que de pousser la carte. */
  overflow-wrap:anywhere;
}
.ml-fact--wide{grid-column:1 / -1}

/* ---- Bloc de contact dans la carte éditeur ---- */
.ml-contact{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin:20px 0 0;padding:18px 20px;
  background:linear-gradient(150deg, #F1F8FE 0%, #E4F1FB 100%);
  border:1px solid rgba(0,157,228,.26);
  border-radius:16px;
}
.ml-contact__q{
  margin:0;font-family:var(--font-heading);
  font-size:15px;font-weight:700;color:var(--legal-heading);
}
/* ==========================================================================
   PASTILLE DE CONTACT — support@egcclim.com présenté comme une action

   Un seul composant pour les deux pages légales qui l'affichent : la
   fiche « Éditeur du site » des mentions légales et l'article 2 des CGV.
   Réservé à l'adresse présentée comme une ACTION : les adresses citées
   au fil d'un paragraphe restent de simples liens.

   Au survol, la pastille ne se remplit PAS d'un aplat cyan : elle passe
   à un dégradé bleu très pâle et l'encre fonce, au lieu de s'inverser.
   L'adresse reste donc lisible pendant toute l'animation — c'était le
   défaut de la version précédente, dont le fond devenait plein.

   Le dégradé est porté par un ::before dont l'opacité transite : un
   background-image ne s'interpole pas, il aurait basculé d'un coup.
   ========================================================================== */
.ml-mail,
.cgv-mail{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;gap:10px;
  min-height:var(--egc-tap);padding:11px 20px;margin:2px 0 0;
  background:rgba(255,255,255,.92);
  border:1px solid #9ed9f5;
  border-radius:999px;
  /* Inter : c'est une commande d'interface, pas un titre. Manrope n'est
     d'ailleurs chargé qu'en 700 et 800, la graisse 600 y serait simulée. */
  font-family:var(--font-body);
  font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.2;
  color:#0075b4;text-decoration:none;
  box-shadow:
    0 3px 10px rgba(0,117,180,.08),
    0 1px 2px rgba(16,47,77,.05);
  overflow-wrap:anywhere;
  transition:transform 220ms cubic-bezier(.2,.8,.2,1),
             background 220ms ease,
             border-color 220ms ease,
             color 220ms ease,
             box-shadow 220ms ease;
}
/* z-index négatif dans le contexte d'empilement créé par isolation :
   le dégradé se glisse derrière le texte, jamais par-dessus. */
.ml-mail::before,
.cgv-mail::before{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,
    rgba(255,255,255,.98),
    rgba(229,246,255,.98));
  opacity:0;
  transition:opacity 220ms ease;
}
/* L'enveloppe suit sa propre transition : elle ne disparaît ni ne
   s'estompe à aucun moment. */
.ml-mail svg,
.cgv-mail svg{
  flex:none;color:#0075b4;
  transition:transform 220ms cubic-bezier(.2,.8,.2,1), color 220ms ease;
}

/* Survol réservé aux pointeurs fins : après un appui tactile, la
   pastille ne reste pas figée dans son état survolé. */
@media (hover:hover) and (pointer:fine){
  .ml-mail:hover,
  .cgv-mail:hover{
    color:#005c90;
    border-color:#55bfea;
    text-decoration:none;
    transform:translateY(-2px);
    box-shadow:
      0 10px 24px rgba(0,117,180,.15),
      0 0 0 3px rgba(0,157,228,.07);
  }
  .ml-mail:hover::before,
  .cgv-mail:hover::before{opacity:1}
  .ml-mail:hover svg,
  .cgv-mail:hover svg{color:#005c90;transform:translateX(2px)}
}

.ml-mail:active,
.cgv-mail:active{
  transform:translateY(0);
  box-shadow:0 4px 12px rgba(0,117,180,.12);
}

.ml-mail:focus-visible,
.cgv-mail:focus-visible{
  outline:3px solid rgba(0,157,228,.3);
  outline-offset:3px;
}

/* ---- Carte « Marques » : note nuancée ---- */
.ml-card--note{
  background:linear-gradient(150deg, #F3FAFE 0%, #E8F3FB 100%);
  border-color:rgba(0,157,228,.28);
}
.ml-card--note::before{
  content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;
  background:linear-gradient(180deg, var(--legal-cyan), rgba(0,157,228,.15));
  border-radius:0 3px 3px 0;
}

/* ---- Paliers ---- */
@media (min-width:620px){
  .ml-facts{grid-template-columns:1fr 1fr;gap:12px}
}
@media (min-width:900px){
  .ml-grid{gap:22px;padding:44px 0 0}
  .ml-card{padding:32px 30px}
  .ml-facts{grid-template-columns:repeat(3,1fr);gap:14px}
  /* Directeur de la publication et Propriété intellectuelle se partagent
     la ligne : la carte courte n'est plus seule sur toute la largeur. */
  .ml-row{display:grid;grid-template-columns:0.8fr 1.2fr;gap:22px;align-items:start}
}

/* ==========================================================================
   10. CONDITIONS GÉNÉRALES DE VENTE — présentation dédiée

   Seule cgv.html utilise ces règles (.cgv-*). confidentialite.html garde
   la présentation .legal-page. Le texte juridique est strictement
   inchangé : seule sa mise en forme évolue.
   ========================================================================== */
.cgv-page{
  /* Fond de page bleu glacé très pâle : la surface de lecture blanche
     s'y détache au lieu de flotter sur du blanc. */
  background:linear-gradient(180deg, #F4FAFE 0%, #EFF7FD 55%, #F4FAFE 100%);
  padding:0 0 24px;
}

.cgv-layout{
  width:100%;max-width:1200px;
  margin-inline:auto;padding:32px 20px 0;
}

/* ---- Sommaire ---- */
.cgv-toc{
  position:relative;
  background:rgba(255,255,255,.92);
  border:1px solid var(--legal-border);
  border-radius:20px;
  box-shadow:
    0 1px 2px rgba(16,47,77,.04),
    0 10px 26px rgba(16,47,77,.06),
    0 26px 52px rgba(16,47,77,.05);
  padding:20px 18px;
  /* Aucune hauteur fixe, donc aucune barre de défilement interne : le
     sommaire s'arrête là où sa liste s'arrête. */
}
.cgv-toc__head{
  display:flex;align-items:center;gap:11px;
  margin:0 0 14px;
}
.cgv-toc__ico{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:11px;
  background:linear-gradient(160deg, #E9F4FC 0%, #D8ECF9 100%);
  border:1px solid rgba(0,157,228,.24);
  color:var(--legal-blue);
}
.cgv-toc__title{
  margin:0;font-family:var(--font-heading);
  font-size:1.02rem;font-weight:700;letter-spacing:-.018em;
  color:#102f4d;line-height:1.25;
  text-transform:none;                    /* pas de capitales criardes */
}

.cgv-toc__list{list-style:none;margin:0;padding:0;display:grid;gap:1px}

.cgv-toc__link{
  position:relative;
  display:grid;grid-template-columns:26px minmax(0,1fr);
  align-items:baseline;gap:10px;
  padding:9px 12px 9px 11px;
  border-radius:10px;
  font-size:14.5px;line-height:1.45;
  color:#1d3a57;text-decoration:none;
  text-align:left;                        /* jamais centré */
  transition:background-color 220ms var(--egc-ease),
             transform 220ms var(--egc-ease), color 220ms var(--egc-ease);
}
.cgv-toc__num{
  font-family:var(--font-heading);
  font-size:12px;font-weight:700;letter-spacing:.02em;
  color:var(--legal-cyan);
  font-variant-numeric:tabular-nums;
}
/* Le libellé se replie sous lui-même, jamais sous le numéro. */
.cgv-toc__txt{display:block;overflow-wrap:break-word}

@media (hover:hover) and (pointer:fine){
  .cgv-toc__link:hover{
    background:#EFF7FD;color:#0075b4;text-decoration:none;transform:translateX(3px);
  }
}
.cgv-toc__link:focus-visible{outline:3px solid var(--legal-cyan);outline-offset:2px}

/* Section en cours de lecture */
.cgv-toc__link.is-active{
  background:#E6F4FD;
  color:#102f4d;font-weight:600;
}
.cgv-toc__link.is-active::before{
  content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;
  background:var(--legal-cyan);border-radius:0 3px 3px 0;
}
.cgv-toc__link.is-active .cgv-toc__num{color:#0075b4}

/* Les entrées au-delà de la huitième, repliées par défaut. */
.cgv-toc__list--rest[hidden]{display:none}

.cgv-toc__more{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:42px;margin:12px 0 0;padding:10px 14px;
  background:#fff;
  border:1px solid var(--legal-border);border-radius:12px;
  font-family:var(--font-body);
  font-size:15px;font-weight:700;color:var(--legal-blue);
  cursor:pointer;
  transition:background-color 220ms var(--egc-ease),
             border-color 220ms var(--egc-ease), color 220ms var(--egc-ease);
}
.cgv-toc__more svg{flex:none;transition:transform 260ms var(--egc-ease)}
.cgv-toc__more[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){
  .cgv-toc__more:hover{background:#EFF7FD;border-color:var(--legal-cyan)}
}
.cgv-toc__more:focus-visible{outline:3px solid var(--legal-cyan);outline-offset:3px}

/* ---- Surface du document ---- */
.cgv-doc{
  background:#fff;
  border:1px solid var(--legal-border);
  border-radius:24px;
  box-shadow:
    0 1px 2px rgba(16,47,77,.04),
    0 12px 30px rgba(16,47,77,.06),
    0 30px 60px rgba(16,47,77,.05);
  padding:24px 22px 28px;
}

/* ---- Un article ---- */
.cgv-art{
  padding:0 0 26px;margin:0 0 26px;
  border-bottom:1px solid #E7F0F7;
  /* La cible d'ancre s'arrête sous le bandeau collant, jamais dessous. */
  scroll-margin-top:calc(var(--hh, 88px) + 22px);
}
.cgv-art:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.cgv-art__h{
  display:flex;align-items:center;gap:12px;
  margin:0 0 14px;
}
/* Pastille du numéro : petit carré arrondi teinté cyan. */
.cgv-art__num{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:30px;padding:0 8px;
  background:#E4F3FC;
  border:1px solid rgba(0,157,228,.28);
  border-radius:9px;
  font-family:var(--font-heading);
  font-size:13px;font-weight:800;letter-spacing:.02em;
  color:#0075b4;font-variant-numeric:tabular-nums;
}
.cgv-art h2{
  margin:0;font-size:1.24rem;letter-spacing:-.024em;line-height:1.3;
  color:#102f4d;font-weight:700;
}
/* Brève mise en lumière de la section rejointe depuis le sommaire. */
@media (prefers-reduced-motion:no-preference){
  .cgv-art.is-targeted .cgv-art__num{animation:cgvPing 1.5s var(--egc-ease) both}
  @keyframes cgvPing{
    0%{box-shadow:0 0 0 0 rgba(0,157,228,.45)}
    45%{box-shadow:0 0 0 8px rgba(0,157,228,0)}
    100%{box-shadow:0 0 0 0 rgba(0,157,228,0)}
  }
}

.cgv-art p{
  margin:0 0 14px;
  font-family:var(--font-body);
  font-size:17px;line-height:var(--leading-legal);color:var(--text-legal, #2d4a66);
  max-width:72ch;
}
.cgv-art p:last-child{margin-bottom:0}
.cgv-art ul{margin:0 0 14px;padding-left:22px;max-width:72ch}
.cgv-art li{margin:0 0 9px;font-size:17px;line-height:var(--leading-legal);color:var(--text-legal, #2d4a66)}
.cgv-art address{
  font-style:normal;font-size:17px;line-height:var(--leading-legal);color:var(--text-legal, #2d4a66);
}
.cgv-art strong{color:#102f4d}
/* Lien de texte : filet cyan maîtrisé, jamais le soulignement natif.
   :not(.cgv-mail) est indispensable — sans lui, ce sélecteur (0,1,1)
   l'emporte sur la pastille de contact (0,1,0) et lui impose sa graisse
   et son filet inférieur, qui remplaçait alors le bas de sa bordure. */
.cgv-art a:not(.cgv-mail){
  color:var(--legal-blue);font-weight:500;text-decoration:none;
  border-bottom:1.5px solid rgba(0,157,228,.45);
  transition:color 220ms var(--egc-ease), border-color 220ms var(--egc-ease);
}
@media (hover:hover) and (pointer:fine){
  .cgv-art a:not(.cgv-mail):hover{color:#005C90;border-bottom-color:var(--legal-cyan)}
}
.cgv-art a:not(.cgv-mail):focus-visible{outline:3px solid var(--legal-cyan);outline-offset:2px;border-radius:3px}

/* ---- Panneau encastré : identité du vendeur, produit ---- */
.cgv-panel{
  margin:0 0 16px;padding:20px;
  background:linear-gradient(150deg, #F4FAFE 0%, #E9F3FB 100%);
  border:1px solid rgba(0,157,228,.24);
  border-radius:16px;
}
.cgv-facts{display:grid;gap:12px;margin:0;grid-template-columns:1fr}
.cgv-fact dt{
  margin:0 0 4px;
  font-family:var(--font-heading);
  font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--legal-muted);line-height:1.3;
}
.cgv-fact dd{
  margin:0;font-size:16px;font-weight:600;line-height:1.55;
  color:#102f4d;overflow-wrap:anywhere;
}
.cgv-fact--wide{grid-column:1 / -1}

/* La pastille de contact est décrite une seule fois, plus bas :
   voir « PASTILLE DE CONTACT ». */

/* ---- Encadré d'information : délais et durées légales ---- */
.cgv-callout{
  display:flex;align-items:center;gap:13px;
  margin:0 0 16px;padding:14px 17px;
  background:linear-gradient(135deg, #EFF7FD 0%, #E4F1FA 100%);
  border:1px solid rgba(0,157,228,.24);
  border-left:3px solid var(--legal-cyan);
  border-radius:13px;
  max-width:72ch;
}
.cgv-callout svg{flex:none;color:var(--legal-blue)}
.cgv-callout b{
  display:block;
  font-family:var(--font-heading);
  font-size:1.02rem;font-weight:700;letter-spacing:-.014em;
  color:#102f4d;line-height:1.35;
}
.cgv-callout span{
  display:block;font-size:14px;line-height:1.5;color:var(--legal-muted);margin-top:2px;
}

/* ---- Paliers ---- */
@media (min-width:620px){
  .cgv-facts{grid-template-columns:1fr 1fr}
  .cgv-doc{padding:32px 30px 36px}
}
@media (min-width:900px){
  .cgv-layout{
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    gap:34px;align-items:start;
    padding-top:44px;
  }
  .cgv-toc{
    position:sticky;
    top:calc(var(--hh, 88px) + 24px);
  }
  .cgv-doc{padding:48px 52px 52px}
  .cgv-facts{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1120px){
  .cgv-doc{padding:52px 56px 56px}
}

/* ---- Palier mobile : le sommaire passe au-dessus, replié ---- */
@media (max-width:899px){
  .cgv-toc{margin:0 0 22px;padding:16px 14px}
  .cgv-toc__head{margin:0}
  /* Le titre devient un bouton pleine largeur. */
  .cgv-toc__toggle{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;min-height:var(--egc-tap);
    margin:0;padding:6px 2px;
    background:none;border:0;cursor:pointer;text-align:left;
  }
  .cgv-toc__panel[hidden]{display:none}
  .cgv-toc__panel{padding-top:14px}
  /* En mobile la liste est entière : le bouton « Afficher toutes les
     sections » n'a plus lieu d'être. */
  .cgv-toc__more{display:none}
  .cgv-toc__list--rest[hidden]{display:grid}
}
@media (min-width:900px){
  .cgv-toc__toggle{display:none}
  .cgv-toc__panel{display:block !important}
  .cgv-toc__chev{display:none}
}
.cgv-toc__chev{
  flex:none;color:var(--legal-blue);
  transition:transform 260ms var(--egc-ease);
}
.cgv-toc__toggle[aria-expanded="true"] .cgv-toc__chev{transform:rotate(180deg)}

/* ---- Entrée au chargement ---- */
@media (prefers-reduced-motion:no-preference){
  .cgv-toc.egc-rise{animation-delay:180ms}
  .cgv-doc.egc-rise{animation-delay:250ms}
}

/* ==========================================================================
   11. PALIER TABLETTE

   Ni telephone, ni ordinateur. Entre 768 et 899px la page servait encore
   la branche mobile : titres a l'echelle du telephone dans un conteneur
   deux fois plus large, colonnes de texte stranded sur la gauche, visuel
   produit sous-dimensionne. Entre 900 et 1199px la mise en page desktop
   convient, mais le doigt remplace la souris.

   Aucune regle ici ne s'applique en dessous de 768px ni au-dela de
   1199px : les deux paliers deja valides sont intacts.
   ========================================================================== */

/* -------------------------------------------------------------------------
   11a. TABLETTE PORTRAIT — 768 a 899px
   ------------------------------------------------------------------------- */
@media (min-width:768px) and (max-width:899px){

  /* ---- Echelle typographique ----
     Les titres passaient de 49px (desktop) a 34px (mobile) sans palier
     intermediaire. Les jetons sont redefinis ici : tout ce qui les
     consomme suit, sans regle par section. */
  :root{
    --type-hero:clamp(2.35rem, 5.2vw, 2.95rem);
    --type-page-title:clamp(2.2rem, 4.9vw, 2.72rem);
    --type-section-title:clamp(2.05rem, 4.6vw, 2.5rem);
    --type-card-title:1.3rem;
    --type-intro:1.15rem;
    /* Respiration laterale : 20px de telephone paraissent maigres sur
       une dalle de 768 a 834px. */
    --pad-section:68px;
  }
  .wrap{padding-inline:32px}

  /* Titres de section qui portent leur propre echelle et ne passent donc
     pas par les jetons. Memes valeurs que --type-section-title. */
  .inst3__title,
  .uext__title,
  .vdemo__title,
  .pcm__title{
    font-size:clamp(2.05rem, 4.6vw, 2.5rem);
    line-height:1.1;
    letter-spacing:-.03em;
  }
  .final__title{font-size:clamp(2.3rem, 5vw, 2.8rem);line-height:1.06}
  .final__price{font-size:clamp(2.6rem, 5.6vw, 3.1rem)}

  /* ---- Colonnes de texte ----
     Les blocs de copie de la branche mobile restaient calees a gauche sur
     360px environ, laissant la moitie droite vide. On les centre et on
     leur donne une largeur de lecture confortable. */
  .pcm__lede,
  .pcm__title,
  .pcm__eyebrow,
  .sil__lede,
  .sil__copy .eyebrow,
  .sil__copy h2{max-width:none}
  .pcm__head{max-width:640px;margin-inline:auto}
  .lede{max-width:64ch}

  /* ---- Hero ----
     Le visuel produit gardait sa taille telephone au milieu d'un
     conteneur deux fois plus large. object-fit:contain preserve le
     rapport : l'unite reste entiere, jamais recadree ni etiree. */
  .hero__product,
  .gal__stage img{
    max-width:min(420px, 62vw);
    margin-inline:auto;
    object-fit:contain;
  }
  .gal__stage{min-height:360px}
  /* Les vignettes suivent, sans jamais depasser leur rangee. */
  .gal__thumb{width:72px;height:72px}
  .gal__thumb img{object-fit:contain}

  /* ---- Cartes de chiffres du hero : deux colonnes equilibrees ---- */
  .hero__specs{gap:16px}

  /* ---- Bandeau de reassurance : deux par deux, cartes de meme hauteur */
  .contact-trust__item{height:100%}
}

/* -------------------------------------------------------------------------
   11b. PIED DE PAGE — la bascule passe de 900 a 768px

   Sur une dalle de 768px, deux colonnes d'accordeons replies laissaient
   une colonne isolee et beaucoup de vide. Le pied de page adopte donc sa
   forme a trois colonnes des 768px, listes deployees. Le module
   d'accordeon du script suit le meme seuil.
   ------------------------------------------------------------------------- */
@media (min-width:768px) and (max-width:899px){
  .site-footer{padding:60px 0 32px}
  .site-footer > .wrap{padding-inline:32px}
  .site-footer__grid{grid-template-columns:1.35fr 1fr 1fr;gap:40px}
  .site-footer__col--brand{grid-column:auto;text-align:left}
  .site-footer__brand{width:220px;margin-inline:0}
  .site-footer__address{text-align:left}
  /* Le bouton redevient un simple titre de colonne. */
  .site-footer__toggle{
    cursor:default;pointer-events:none;
    border-bottom:0;padding:0;min-height:0;margin-bottom:14px;
  }
  .site-footer__pm{display:none}
  .site-footer__list{padding:0;gap:2px}
  /* Contrairement au palier desktop, la cible reste a 44px : on est sur
     une dalle tactile. */
  .site-footer__link{min-height:44px;padding:6px 0}
  .site-footer__bottom{margin-top:44px;padding-top:26px}
}

/* -------------------------------------------------------------------------
   11c. CIBLES TACTILES — 768 a 1199px

   Sur une tablette, le doigt remplace la souris. Les zones actives sont
   portees a 44px SANS toucher au dessin : on etend la surface avec un
   pseudo-element hors flux, la pastille et le lien gardent leur taille.
   ------------------------------------------------------------------------- */
@media (min-width:768px) and (max-width:1199px){

  /* « Lire la suite » : 23px de haut, la plus petite cible de la page. */
  .rv__more{min-height:44px;display:inline-flex;align-items:center}

  /* Pastilles du comparatif : le rond reste a 8px, la zone active passe
     a 44px. ::before porte deja l'etat actif, on utilise ::after. */
  .cmpi__dot{position:relative}
  .cmpi__dot::after{
    content:"";position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%);
  }

  /* Loupe des visuels : 40px -> 44px. Les deux contextes posent leur
     propre taille, il faut donc les egaler en specificite. */
  .cmpi__car .img__zoom,
  .kit__photo .img__zoom,
  .img__zoom{width:44px;height:44px}

  /* Retour a l'accueil, sommaire des CGV : 39-40px, juste sous la barre. */
  .subpage-hero__back{min-height:44px}
  .cgv-toc__link{min-height:44px;align-items:center}

  /* Liens du pied de page : le palier desktop les ramene a 0 pour serrer
     la colonne. Sur une dalle tactile ils gardent leurs 44px. */
  .site-footer__link{min-height:44px}

  /* Liens de navigation : 19px de haut en paysage. La surface est
     etendue par ::before ; ::after porte le filet de survol et n'est pas
     touche, le soulignement reste donc exactement ou il est. */
  .header__nav a::before{
    content:"";position:absolute;left:0;right:0;top:50%;
    height:44px;transform:translateY(-50%);
  }
}

/* -------------------------------------------------------------------------
   11d. FENETRES ET BARRE COLLANTE EN TABLETTE

   La feuille montante s'arrete a 699px : entre 700 et 899px la fenetre
   redevenait centree mais gardait la largeur du telephone. On lui rend
   une largeur de tablette, toujours avec defilement interne.
   ------------------------------------------------------------------------- */
@media (min-width:768px) and (max-width:1199px){
  .legal-dialog{width:min(680px, calc(100vw - 72px));max-height:84vh}
  .legal-dialog__box{max-height:84vh}
  /* La barre de commande garde sa hauteur desktop des 768px : elle est
     deja compacte et ne recouvre jamais le pied de page, la marge basse
     du document etant calee sur --obar-h. */
  .cookie-banner__box{padding:22px 26px}
}

/* -------------------------------------------------------------------------
   11e. RACCORD 900-1199px

   Les jetons desktop repartent de leur borne basse a 900px : le titre
   retombait de 43px (a 834px) a 38px (a 900px). On releve le plancher sur
   la plage tablette paysage pour que l'echelle ne recule jamais quand la
   largeur augmente.
   ------------------------------------------------------------------------- */
@media (min-width:900px) and (max-width:1199px){
  :root{
    --type-hero:clamp(2.7rem, 4.3vw, 3.05rem);
    --type-page-title:clamp(2.5rem, 4vw, 2.85rem);
    --type-section-title:clamp(2.35rem, 3.8vw, 2.75rem);
  }
  .inst3__title,
  .uext__title,
  .vdemo__title{font-size:clamp(2.35rem, 3.8vw, 2.75rem)}
  .final__title{font-size:clamp(2.7rem, 4.4vw, 3.4rem)}
}