/* =============================================================================
   coquille.css - ce que l'en-tête et le pied capturés, le tiroir du mini-panier, les
   messages flash, les boutons et les champs partagent avec TOUT le site (lot 4, tâche 2).

   Chargée sur les écrans de l'application (après legacy-shell, avant site.css) ET sur les
   pages capturées (après legacy-pages, avant pages.css), qui n'ont PAS site.css. D'où trois
   règles :
     - aucun sélecteur d'élément nu ni « * » : seules des classes, jamais de règle qui
       toucherait le contenu capturé ;
     - aucun nom de classe commun avec les trois bundles legacy-* (tests/pages_contract.php) ;
     - chaque règle vit ici OU dans site.css, jamais aux deux.

   Sommaire
     1. Polices                 4. Mini-panier (dans l'en-tête capturé)
     2. Jetons de design        5. Boutons, flashs, champs, leurre anti-robot
     3. Utilitaires             6. Tiroir du mini-panier
     7. Mouvement réduit
   ========================================================================== */

/* 1. Polices ---------------------------------------------------------------
   Sous-ensemble latin de Google Fonts (U+0000-00FF, œ, €, ’, « », espaces
   fines) : tout le français. Mêmes URL que les <link rel="preload"> du gabarit. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600.woff2") format("woff2");
}

/* 2. Jetons de design ------------------------------------------------------ */
:root {
  /* Couleurs de l'identité (Global Constraints, valeurs exactes). */
  --couleur-texte: #3D3D3D;            /* 10,9:1 sur blanc */
  --couleur-texte-secondaire: #7A7A7A; /* 4,3:1 sur blanc : grands textes et
                                          éléments décoratifs SEULEMENT */
  --couleur-accent: #4669A3;           /* 5,5:1 sur blanc, texte blanc 5,5:1 */
  --couleur-fond: #FBFBFB;
  --couleur-fond-alt: #F1F1F1;
  --couleur-surface: #FFFFFF;          /* cartes, en-tête, tiroir */

  /* Dérivées, calculées pour tenir le contraste AA. */
  --couleur-texte-attenue: #6B6B6B;    /* petit texte secondaire : 5,3:1 sur
                                          blanc, 4,7:1 sur #F1F1F1 */
  --couleur-accent-fonce: #3A5A8F;     /* survol des boutons (blanc 6,9:1) */
  --couleur-accent-pale: #EAF0F8;      /* fonds teintés d'accent */
  --couleur-bordure: #E6E6E6;          /* séparations décoratives */
  --couleur-bordure-champ: #949494;    /* contour des champs : 3:1 (WCAG 1.4.11) */
  --couleur-focus: #4669A3;

  /* États (texte sur fond teinté, tous >= 4,5:1). */
  --couleur-succes: #1F6E43;
  --couleur-succes-fond: #E5F3EA;
  --couleur-alerte: #8A4A0B;
  --couleur-alerte-fond: #FCEEDC;
  --couleur-neutre: #595959;
  --couleur-neutre-fond: #EDEDED;
  --couleur-erreur: #B3261E;
  --couleur-erreur-fond: #FCEBEA;

  /* Pied de page sombre, comme le site actuel. */
  --couleur-pied: #3D3D3D;
  --couleur-pied-texte: #F1F1F1;       /* 9,6:1 */
  --couleur-pied-attenue: #C9C9C9;     /* 6,6:1 */

  /* Typographie : Poppins, échelle 1,25 environ. */
  --police: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --taille-xs: 0.8125rem;  /* 13 px : mentions */
  --taille-sm: 0.875rem;   /* 14 px : texte d'appoint, boutons de carte */
  --taille-base: 1rem;     /* 16 px : corps */
  --taille-md: 1.125rem;   /* 18 px : chapô, prix de carte */
  --taille-lg: 1.375rem;   /* 22 px : h3 */
  --taille-xl: 1.75rem;    /* 28 px : h2 */
  --taille-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.625rem); /* h1 : 30 → 42 px */
  --interligne: 1.6;
  --interligne-serre: 1.25;
  --graisse-normale: 400;
  --graisse-moyenne: 500;
  --graisse-forte: 600;

  /* Espacements : base 4 px. */
  --espace-1: 0.25rem;  /*  4 */
  --espace-2: 0.5rem;   /*  8 */
  --espace-3: 0.75rem;  /* 12 */
  --espace-4: 1rem;     /* 16 */
  --espace-5: 1.5rem;   /* 24 */
  --espace-6: 2rem;     /* 32 */
  --espace-7: 3rem;     /* 48 */
  --espace-8: 4rem;     /* 64 */
  --espace-9: 6rem;     /* 96 */

  /* Rayons. */
  --rayon-petit: 6px;
  --rayon: 10px;
  --rayon-grand: 16px;
  --rayon-pilule: 999px;

  /* Ombres : toujours décalées et diffuses, teinte de l'encre. */
  --ombre-1: 0 1px 2px rgb(61 61 61 / 0.06), 0 1px 3px rgb(61 61 61 / 0.06);
  --ombre-2: 0 2px 4px rgb(61 61 61 / 0.04), 0 8px 24px rgb(61 61 61 / 0.09);
  --ombre-3: 0 12px 48px rgb(40 48 64 / 0.22);

  /* Gabarit. */
  --largeur-max: 1200px;
  --gouttiere: var(--espace-4);   /* 16 px mobile, 24 px tablette, 32 px bureau */
  --cible-min: 44px;              /* toute cible tactile */
  --hauteur-entete: 80px;        /* en-tête capturé : min-height 80 px, collant */

  /* Mouvement : sortie exponentielle. */
  --courbe-sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --duree-courte: 160ms;
  --duree: 320ms;
}
@media (min-width: 640px) {
  :root { --gouttiere: var(--espace-5); }
}
@media (min-width: 1024px) {
  :root { --gouttiere: var(--espace-6); }
}

/* En-tête capturé sous 768 px : logo et burger sur une ligne, mini-panier dessous (129 px mesurés à 375 px). */
@media (max-width: 767px) {
  :root { --hauteur-entete: 129px; }
}

/* 3. Utilitaires ----------------------------------------------------------- */
/* box-sizing, [hidden], police et focus des composants de cette feuille : site.css les pose
   sur tout l'écran de l'application, une page capturée n'a pas site.css. */
.mini-panier, .mini-panier *, .mini-panier::before, .mini-panier::after,
.tiroir, .tiroir *, .tiroir::before, .tiroir::after,
.btn, .btn::before, .btn::after, .bouton-icone,
.flash, .flash *, .champ, .champ *, .case, .case *, .lien-evitement { box-sizing: border-box; }
.mini-panier [hidden], .tiroir [hidden], .tiroir[hidden] { display: none !important; }
:where(.mini-panier, .tiroir, .btn, .bouton-icone, .champ__saisie, .case input) { font: inherit; color: inherit; }
.mini-panier:focus-visible, .tiroir :focus-visible, .btn:focus-visible, .bouton-icone:focus-visible,
.champ__saisie:focus-visible, .case input:focus-visible, .lien-evitement:focus-visible {
  outline: 3px solid var(--couleur-focus);
  outline-offset: 2px;
}
.tiroir img { display: block; max-width: 100%; height: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icone {
  display: block;
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visuellement-masque {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lien-evitement {
  position: absolute;
  top: var(--espace-2);
  left: var(--espace-2);
  z-index: 100;
  padding: var(--espace-3) var(--espace-4);
  background: var(--couleur-surface);
  color: var(--couleur-accent);
  font-weight: var(--graisse-moyenne);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-2);
  transform: translateY(-200%);
}
.lien-evitement:focus { transform: none; }

/* 4. Mini-panier ----------------------------------------------------------- */
/* Bouton du mini-panier (lien vers /panier/ sans JavaScript). */
.mini-panier {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
  min-height: var(--cible-min);
  min-width: 7.25rem;   /* largeur réservée : le montant arrive par JavaScript (Décision H), 115 px une fois rempli */
  padding: var(--espace-1) var(--espace-3) var(--espace-1) var(--espace-2);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-pilule);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-moyenne);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--duree-courte) ease, background-color var(--duree-courte) ease, box-shadow var(--duree-courte) ease,
              transform 100ms ease-out;
}
.mini-panier:hover {
  color: var(--couleur-texte);
  border-color: var(--couleur-accent);
  box-shadow: var(--ombre-1);
}
.mini-panier__icone {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--couleur-accent-pale);
  color: var(--couleur-accent);
}
.mini-panier__icone .icone { width: 20px; height: 20px; }
.mini-panier__nombre {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--couleur-surface);
  border-radius: var(--rayon-pilule);
  background: var(--couleur-accent);
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: var(--graisse-forte);
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mini-panier__total { font-variant-numeric: tabular-nums; }
/* Sur téléphone, le montant remplace le libellé dès qu'il est connu. */
.mini-panier[data-rempli] .mini-panier__libelle { display: none; }
/* Refonte : le mini-panier s'accorde au bandeau noir de l'en-tête (pilule claire sur fond sombre, au lieu d'une pilule
   blanche étirée à 59 px par son conteneur) et reste centré verticalement, à la hauteur d'une cible tactile (44 px). */
.tempo-kit--entete .mini-panier {
  align-self: center;
  height: var(--cible-min);
  border-color: rgb(255 255 255 / 0.28);
  background: rgb(255 255 255 / 0.06);
  color: #FFFFFF;
}
.tempo-kit--entete .mini-panier:hover { color: #FFFFFF; border-color: rgb(255 255 255 / 0.6); background: rgb(255 255 255 / 0.12); box-shadow: none; }
.tempo-kit--entete .mini-panier__icone { background: rgb(255 255 255 / 0.14); color: #FFFFFF; }
.tempo-kit--entete .mini-panier__nombre { border-color: #0B0B0B; }
.tempo-kit--entete .mini-panier[data-rempli] .mini-panier__total::before { color: rgb(255 255 255 / 0.6); }
.tempo-kit--entete .mini-panier:focus-visible { outline-color: #FFFFFF; }
/* Refonte, lot 1 : sur téléphone, le bouton se réduit à son icône (le montant reste quand il est connu) pour tenir sur
   la ligne du logo : l'en-tête collant passait sur deux lignes et prenait 130 px de l'écran. Le libellé reste lu par
   les lecteurs d'écran (masqué visuellement, pas retiré), et site.js réécrit de toute façon aria-label. */
/* En-tête capturé sur téléphone : logo, panier et menu sur UNE ligne (Elementor les empilait en colonne : 129 px).
   Attributs seulement (aucune classe des bundles) ; quatre attributs pour passer devant la règle du bundle (0,3,0). */
@media (max-width: 767.98px) {
  .tempo-kit--entete [data-id="4ab10495"][data-element_type="container"][data-e-type="container"] {
    --flex-direction: row; flex-direction: row; align-items: center; gap: var(--espace-2);
    min-height: 0; padding-top: var(--espace-2); padding-bottom: var(--espace-2);
  }
  .tempo-kit--entete [data-id="6b6540ce"][data-element_type="widget"] { order: 1; margin-right: auto; }
  .tempo-kit--entete [data-id="34e4c472"][data-element_type="container"][data-e-type="container"] {
    order: 2; width: auto; min-height: 0; margin: 0 0 0 auto; padding: 0; align-self: center;
  }
  .tempo-kit--entete [data-id="70aae85"][data-element_type="widget"] {
    order: 3; flex: 0 0 auto; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; align-self: center; justify-content: center;
  }
  /* (Menu déroulant : le second <nav>, sans aria-label ; rubrique courante : aria-current, posé par Coquille.php.)
     Le menu ouvert se déploie SOUS le bouton qui l'ouvre, par-dessus la page, au lieu d'agrandir l'en-tête et de déplacer
     le logo (cohérence spatiale : il naît de son déclencheur). */
  [data-tempo-widget="menu-mobile"] { position: relative; }
  [data-tempo-widget="menu-mobile"] nav:not([aria-label]) {
    position: absolute; top: calc(100% + var(--espace-2)); right: 0; min-width: 12rem;
    border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre-3); transform-origin: top right;
  }
  /* Rubrique courante du menu ouvert : le bundle posait un fond gris foncé sous un texte gris foncé (illisible). Elle se
     distingue désormais par la couleur d'accent sur fond pâle, comme la rubrique courante du menu de bureau. */
  [data-tempo-widget="menu-mobile"] nav:not([aria-label]) a[aria-current="page"][href] {
    background-color: var(--couleur-accent-pale); color: var(--couleur-accent);
  }
}
@media (max-width: 639.98px) {
  .mini-panier { min-width: 0; padding: var(--espace-1); border-color: transparent; background: transparent; }
  .mini-panier[data-rempli] { padding-right: var(--espace-3); }
  .tempo-kit--entete .mini-panier { border-color: transparent; background: transparent; }
  .tempo-kit--entete .mini-panier[data-rempli] { border-color: rgb(255 255 255 / 0.28); }
  .mini-panier__libelle {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
@media (min-width: 640px) {
  .mini-panier { min-width: 11.25rem; }   /* « Panier · 35,00 € » : 179 px */
  .mini-panier[data-rempli] .mini-panier__libelle { display: inline; }
  .mini-panier[data-rempli] .mini-panier__total::before {
    content: "·";
    margin-right: var(--espace-2);
    color: var(--couleur-texte-secondaire);
  }
}

/* 5. Boutons, flashs, champs ------------------------------------------------ */
/* Boutons. .btn seul = base ; variantes --principal, --secondaire, --discret ;
   modificateurs --bloc (pleine largeur), --grand. Chargement : aria-busy="true". */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-2);
  min-height: var(--cible-min);
  padding: var(--espace-2) var(--espace-5);
  border: 1px solid transparent;
  border-radius: var(--rayon);
  font-size: var(--taille-base);
  font-weight: var(--graisse-moyenne);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duree-courte) ease, border-color var(--duree-courte) ease,
              color var(--duree-courte) ease, box-shadow var(--duree-courte) ease, transform 100ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
/* Retour dès l'appui, pas au relâchement (lot 1 de la refonte, principes « apple-design ») : la réponse est immédiate et
   courte. Le relâchement revient par la même transition, le geste peut être annulé en glissant hors du bouton. */
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(0.97); }
.btn .icone { width: 1.125em; height: 1.125em; }
.btn--principal {
  background: var(--couleur-accent);
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgb(58 90 143 / 0.25);
}
/* Pages capturées : legacy-base.css pose fond #c36 et texte blanc sur tout bouton au focus et au survol (0,2,0). Le focus
   reprend ici le rendu de repos ; chaque règle :focus précède son :hover, le survol garde le dernier mot (revue finale I1). */
.btn--principal:focus {
  background: var(--couleur-accent);
  color: #FFFFFF;
}
.btn--principal:hover {
  background: var(--couleur-accent-fonce);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgb(58 90 143 / 0.28);
}
.btn--secondaire {
  background: var(--couleur-surface);
  border-color: var(--couleur-accent);
  color: var(--couleur-accent);
}
.btn--secondaire:focus {
  background: var(--couleur-surface);
  color: var(--couleur-accent);
}
.btn--secondaire:hover {
  background: var(--couleur-accent-pale);
  color: var(--couleur-accent-fonce);
  border-color: var(--couleur-accent-fonce);
}
.btn--discret {
  background: transparent;
  color: var(--couleur-texte);
}
.btn--discret:focus { background: transparent; color: var(--couleur-texte); }
.btn--discret:hover { background: var(--couleur-fond-alt); color: var(--couleur-texte); }
.btn--bloc { width: 100%; }
.btn--grand { min-height: 52px; padding-inline: var(--espace-6); font-size: var(--taille-md); }
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--couleur-fond-alt);
  border-color: var(--couleur-fond-alt);
  color: var(--couleur-texte-attenue);
  box-shadow: none;
  cursor: not-allowed;
}
/* Envoi en cours : le bouton garde sa couleur (il est désactivé pour éviter
   un double envoi, mais n'a pas l'air « indisponible ») ; le libellé reste en
   place, masqué, pour que la largeur ne saute pas ; un anneau tourne. */
.btn[aria-busy="true"] { color: transparent; pointer-events: none; cursor: progress; }
.btn--principal[aria-busy="true"] { background: var(--couleur-accent); border-color: transparent; }
.btn--secondaire[aria-busy="true"] { background: var(--couleur-surface); border-color: var(--couleur-accent); }
.btn--discret[aria-busy="true"] { background: transparent; border-color: transparent; }
.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: auto;
  border: 2px solid #FFFFFF;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tourner 700ms linear infinite;
}
.btn--secondaire[aria-busy="true"]::after,
.btn--discret[aria-busy="true"]::after { border-color: var(--couleur-accent); border-right-color: transparent; }
@keyframes tourner { to { transform: rotate(1turn); } }

/* Bouton carré à icône seule (fermer, −, +). */
.bouton-icone {
  display: inline-grid;
  place-items: center;
  width: var(--cible-min);
  height: var(--cible-min);
  padding: 0;
  border: 0;
  border-radius: var(--rayon);
  background: transparent;
  color: var(--couleur-texte);
  transition: background-color var(--duree-courte) ease;
}
.bouton-icone:focus { background: transparent; color: var(--couleur-texte); }
.bouton-icone:hover { background: var(--couleur-fond-alt); color: var(--couleur-texte); }

/* Messages flash : .flash--succes | --erreur | --info, posés par le gabarit
   (clés de session success, error, info) ou par une page. */
.flashs { display: grid; gap: var(--espace-3); margin-bottom: var(--espace-5); }
.flash {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-3);
  padding: var(--espace-3) var(--espace-4);
  border: 1px solid transparent;
  border-radius: var(--rayon);
  font-family: var(--police);
  font-size: var(--taille-sm);
  line-height: 1.5;
}
.flash__icone { margin-top: 1px; width: 1.25rem; height: 1.25rem; }
.flash__texte { margin: 0; }
.flash--succes { background: var(--couleur-succes-fond); border-color: rgb(31 110 67 / 0.18); color: var(--couleur-succes); }
.flash--erreur { background: var(--couleur-erreur-fond); border-color: rgb(179 38 30 / 0.18); color: var(--couleur-erreur); }
.flash--info   { background: var(--couleur-accent-pale); border-color: rgb(70 105 163 / 0.2); color: #2E4F86; }

/* Formulaires : .champ = libellé visible + saisie + aide + erreur sous le champ.
     <div class="champ champ--erreur">
       <label class="champ__libelle" for="email">E-mail</label>
       <input class="champ__saisie" id="email" aria-invalid="true" aria-describedby="email-erreur">
       <p class="champ__erreur" id="email-erreur">…</p>
     </div>
   .formulaire empile les champs ; .case pour une case à cocher. */
.formulaire { display: grid; gap: var(--espace-5); max-width: 32rem; }
.champ { display: grid; gap: var(--espace-2); }
.champ__libelle { font-size: var(--taille-sm); font-weight: var(--graisse-moyenne); }
.champ__obligatoire { color: var(--couleur-erreur); }
.champ__saisie {
  width: 100%;
  min-height: 48px;
  padding: var(--espace-3) var(--espace-4);
  border: 1px solid var(--couleur-bordure-champ);
  border-radius: var(--rayon);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  font-size: var(--taille-base); /* 16 px : pas de zoom forcé sur iOS */
  line-height: 1.4;
  transition: border-color var(--duree-courte) ease, box-shadow var(--duree-courte) ease;
}
.champ__saisie::placeholder { color: var(--couleur-texte-attenue); opacity: 1; }
.champ__saisie:hover { border-color: var(--couleur-texte-attenue); }
.champ__saisie:focus {
  outline: none;
  border-color: var(--couleur-accent);
  box-shadow: 0 0 0 3px rgb(70 105 163 / 0.25);
}
textarea.champ__saisie { min-height: 8rem; resize: vertical; }
select.champ__saisie {
  appearance: none;
  padding-right: var(--espace-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D3D3D' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--espace-3) center;
  background-size: 1.25rem;
}
.champ__aide { margin: 0; color: var(--couleur-texte-attenue); font-size: var(--taille-xs); line-height: 1.5; }
.champ__erreur {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-1);
  margin: 0;
  color: var(--couleur-erreur);
  font-size: var(--taille-sm);
  line-height: 1.45;
}
.champ--erreur .champ__saisie,
.champ__saisie[aria-invalid="true"] { border-color: var(--couleur-erreur); }
.champ--erreur .champ__saisie:focus,
.champ__saisie[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgb(179 38 30 / 0.2); }
.case {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-3);
  min-height: var(--cible-min);
  padding-block: var(--espace-2);
  font-size: var(--taille-sm);
  cursor: pointer;
}
.case input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--couleur-accent);
}

/* Leurre du garde anti-robot (Core\AntiBot) : hors écran, jamais focalisable. */
.form-piege { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* 6. Tiroir du mini-panier ------------------------------------------------- */
.tiroir {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(100vw, 420px);
  max-width: 100vw;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  font-family: var(--police);
  box-shadow: var(--ombre-3);
  overflow: hidden;
  /* Ouverture : glisse depuis la droite (une seule animation signée). */
  transform: translateX(100%);
  transition: transform var(--duree) var(--courbe-sortie),
              overlay var(--duree) allow-discrete, display var(--duree) allow-discrete;
}
.tiroir[open] { transform: none; }
@starting-style {
  .tiroir[open] { transform: translateX(100%); }
}
.tiroir::backdrop {
  background: rgb(30 34 42 / 0);
  transition: background-color var(--duree) ease, overlay var(--duree) allow-discrete, display var(--duree) allow-discrete;
}
.tiroir[open]::backdrop { background: rgb(30 34 42 / 0.45); }
@starting-style {
  .tiroir[open]::backdrop { background: rgb(30 34 42 / 0); }
}
.tiroir__panneau {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tiroir__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3);
  padding: var(--espace-3) var(--espace-3) var(--espace-3) var(--espace-5);
  border-bottom: 1px solid var(--couleur-bordure);
}
.tiroir__titre { margin: 0; font-size: var(--taille-md); }
.tiroir__annonce {
  margin: 0;
  padding: var(--espace-3) var(--espace-5);
  background: var(--couleur-succes-fond);
  color: var(--couleur-succes);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-moyenne);
}
.tiroir__annonce:empty { display: none; }
.tiroir__corps {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--espace-2) var(--espace-5);
}
.tiroir__chargement {
  margin: var(--espace-6) 0;
  color: var(--couleur-texte-attenue);
  font-size: var(--taille-sm);
  text-align: center;
}
.tiroir__vide {
  display: grid;
  justify-items: center;
  gap: var(--espace-2);
  padding-block: var(--espace-8) var(--espace-6);
  text-align: center;
}
.tiroir__vide-icone {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--espace-2);
  border-radius: 50%;
  background: var(--couleur-accent-pale);
  color: var(--couleur-accent);
}
.tiroir__vide-icone .icone { width: 28px; height: 28px; }
.tiroir__vide-titre { margin: 0; font-weight: var(--graisse-forte); font-size: var(--taille-md); }
.tiroir__vide-aide { max-width: 28ch; margin: 0 0 var(--espace-4); color: var(--couleur-texte-attenue); font-size: var(--taille-sm); }
.tiroir__lignes { margin: 0; padding: 0; list-style: none; }
.tiroir__ligne {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: var(--espace-3);
  padding-block: var(--espace-4);
  border-bottom: 1px solid var(--couleur-bordure);
}
.tiroir__ligne:last-child { border-bottom: 0; }
.tiroir__vignette {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--couleur-fond-alt);
  color: var(--couleur-texte-secondaire);
}
.tiroir__vignette img { width: 100%; height: 100%; object-fit: contain; }
.tiroir__vignette .icone { width: 26px; height: 26px; stroke-width: 1.25; }
.tiroir__nom {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--couleur-texte);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-moyenne);
  line-height: 1.4;
  text-decoration: none;
}
.tiroir__nom:hover { color: var(--couleur-accent); text-decoration: underline; }
.tiroir__quantite { margin: 2px 0 0; color: var(--couleur-texte-attenue); font-size: var(--taille-xs); }
.tiroir__prix { font-size: var(--taille-sm); font-weight: var(--graisse-forte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tiroir__pied {
  display: grid;
  gap: var(--espace-2);
  padding: var(--espace-4) var(--espace-5) max(var(--espace-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--couleur-bordure);
  background: var(--couleur-fond);
}
.tiroir__sous-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  font-weight: var(--graisse-moyenne);
}
.tiroir__montant { font-size: var(--taille-lg); font-weight: var(--graisse-forte); font-variant-numeric: tabular-nums; }
.tiroir__mention { margin: 0 0 var(--espace-2); color: var(--couleur-texte-attenue); font-size: var(--taille-xs); }

/* 7. Pages capturées : en-tête collant, menu, accordéon, titres ------------- */
/* En-tête collant (réglage `sticky_on` : bureau, tablette, mobile), en CSS seul. Sur tout le site : le conteneur
   est un enfant direct de <body>, aucun ancêtre n'a d'overflow. Le fond est celui de l'en-tête capturé. */
.tempo-kit--entete {
  position: sticky;
  top: 0;
  z-index: 90;
}
/* Le bloc du panier garde la hauteur du widget d'origine (59 px contre la référence) : le mini-panier fait 44 px, et
   sans cela l'en-tête perdrait 15 px sous 768 px, toute la page remontant d'autant. Attribut, pas la classe du bundle. */
.tempo-kit--entete [data-id="34e4c472"] { min-height: 59px; }
/* Ancres (/#faq, lien d'évitement) et focus au clavier (Maj+Tab) ne passent pas sous l'en-tête collant. `:root` et
   non `html` : cette feuille n'a aucun sélecteur d'élément nu. */
:root { scroll-padding-top: calc(var(--hauteur-entete) + var(--espace-4)); }

/* Accordéon (coquille.js pose uc-item-active et les attributs ARIA). Le bundle porte déjà le repli (display: none),
   le curseur et l'alternance plus/moins ; seul manque le `display: block` que le script d'origine posait en JS. */
#uc_uc_icon_accordion_elementor_0149118 .uc_ac_box.uc-item-active .uc_content { display: block; }
[data-tempo-widget="accordeon"] .uc_trigger:focus-visible {
  outline: 2px solid var(--couleur-accent, currentColor);
  outline-offset: -2px;
}

/* Menu mobile : le bouton se voit au clavier. L'ouverture est dans legacy-shell.css (elementor-active). */
[data-tempo-widget="menu-mobile"] .elementor-menu-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Titres animés de l'accueil : trait statique (Décision J). Le tracé SVG venait du script d'Elementor ; un ovale
   dans la couleur du kit le remplace, sans animation. */
.elementor-headline--style-highlight .elementor-headline-dynamic-wrapper::after {
  content: "";
  position: absolute;
  inset: -0.5em -0.5em; /* l'ovale d'origine dépasse de 10 px */
  border: 3px solid var(--e-global-color-ed58647, currentColor);
  border-radius: 50%;
  pointer-events: none;
}

/* 8. Bandeau d'information sur les cookies et complément de confidentialité (tâche 9) ---------------------------- */
/* Dernier enfant de <body>, collant en bas de l'écran : il suit la lecture sans jamais recouvrir la fin de la page
   (le pied et le bas du formulaire de contact restent atteignables). Informe seulement : un texte, un lien, un bouton. */
.bandeau-cookies {
  position: sticky;
  bottom: 0;
  z-index: 95;               /* au-dessus de l'en-tête collant (90), sous le lien d'évitement (100) */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3) var(--espace-5);
  padding: var(--espace-3) var(--espace-4);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  border-top: 1px solid var(--couleur-bordure);
  box-shadow: 0 -4px 18px rgb(61 61 61 / 0.1);
  font-family: var(--police);
  font-size: var(--taille-sm);
  line-height: var(--interligne);
}
/* Un élément atteint au clavier ne finit pas sous le bandeau collant (hauteur mesurée à 375 px : 152 px, soit moins de 10 rem). */
:root:has(.bandeau-cookies) { scroll-padding-bottom: 10rem; }
.bandeau-cookies__texte { flex: 1 1 22rem; margin: 0; }
.bandeau-cookies__texte a { color: var(--couleur-accent); text-underline-offset: 0.15em; }
.bandeau-cookies__formulaire { flex: 0 0 auto; margin: 0; }
.bandeau-cookies .btn { min-height: var(--cible-min); font-size: var(--taille-sm); }
@media (max-width: 480px) {
  /* Plus compact (lot 1) : le bouton à côté du texte plutôt qu'en pleine largeur dessous, le bandeau prend moins d'écran. */
  .bandeau-cookies { flex-wrap: nowrap; gap: var(--espace-3); padding: var(--espace-2) var(--espace-3); font-size: var(--taille-xs); line-height: 1.45; }
  .bandeau-cookies__texte { flex: 1 1 auto; }
  .bandeau-cookies .btn { padding-inline: var(--espace-4); white-space: nowrap; }
}

/* Complément de la politique de confidentialité, sous le texte capturé (page capturée : ni site.css ni .conteneur). */
.confid-compl {
  box-sizing: border-box;
  max-width: 1140px;
  margin: 0 auto;
  padding: var(--espace-5) var(--espace-4) var(--espace-8);
  font-family: var(--police);
  color: var(--couleur-texte);
  line-height: 1.7;
}
.confid-compl h2 { margin: 0 0 var(--espace-4); font-size: var(--taille-xl); line-height: var(--interligne-serre); }
.confid-compl h3 { margin: var(--espace-5) 0 var(--espace-2); font-size: var(--taille-md); line-height: var(--interligne-serre); }
.confid-compl p { margin: 0 0 var(--espace-3); }
.confid-compl a { color: var(--couleur-accent); overflow-wrap: anywhere; }
.confid-compl__tableau { max-width: 100%; margin: 0 0 var(--espace-4); overflow-x: auto; }
.confid-compl table { width: 100%; border-collapse: collapse; font-size: var(--taille-sm); }
.confid-compl th, .confid-compl td { padding: var(--espace-2) var(--espace-3); border: 1px solid var(--couleur-bordure); text-align: left; vertical-align: top; }
.confid-compl thead th { background: var(--couleur-fond-alt); }
.confid-compl tbody th { font-weight: var(--graisse-normale); }
.confid-compl td { white-space: nowrap; }
@media (max-width: 480px) {
  .confid-compl { padding-inline: var(--espace-4); }
  .confid-compl td { white-space: normal; }
  .confid-compl th, .confid-compl td { padding: var(--espace-2); }
}

/* 9. Refonte, lot 1 : retour à l'appui, pied lisible, préférences d'affichage ------------------------------- */
/* Mini-panier et boutons d'icône réagissent eux aussi dès l'appui. */
.mini-panier:active, .bouton-icone:active { transform: scale(0.96); }
.bouton-icone { transition: transform 100ms ease-out; }

/* Pied de page capturé (même pied sur tout le site) : les liens étaient #4669A3 sur fond noir, 3,6:1, sous le seuil AA.
   La variable de la couleur d'accent du kit est redéfinie pour le seul pied : #8FA9D9, 8,3:1, toujours bleu. Sélecteur
   d'attribut, aucune classe des bundles (tests/pages_contract.php). */
[data-elementor-type="footer"] { --e-global-color-ed58647: #8FA9D9; }
/* La marge basse du dernier bloc du pied traversait le pied et <body> (fusion des marges) : 39 px de blanc sous le fond
   noir. Un nouveau contexte de formatage la garde à l'intérieur, sur le fond du pied. */
.tempo-kit--pied { display: flow-root; }

/* Contraste renforcé demandé par le système : anneau de focus plus épais, contours des boutons visibles, liens soulignés. */
@media (prefers-contrast: more) {
  .btn:focus-visible, .mini-panier:focus-visible, .bouton-icone:focus-visible, .champ__saisie:focus-visible { outline-width: 4px; }
  .btn--principal, .btn--secondaire { border-color: currentColor; }
  [data-elementor-type="footer"] { --e-global-color-ed58647: #C8D6EE; }
  .bandeau-cookies { border-top: 2px solid var(--couleur-texte); }
}

/* Pastille du panier : un rebond court quand un article arrive (refonte, lot 2). */
@keyframes rebond-pastille { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 70% { transform: scale(0.92); } 100% { transform: scale(1); } }
.mini-panier__nombre--rebond { animation: rebond-pastille 420ms cubic-bezier(0.32, 0.72, 0, 1); }

/* Audit « ui-ux-pro-max » (02/11/2026) : cibles tactiles d'au moins 44 x 44 px et contraste 4,5:1. */
/* Bouton du menu sur téléphone : 33 px, sous le minimum tactile. */
/* Limité aux largeurs où Elementor montre ce bouton (tablette et téléphone) : sans cette borne, « display » le rendait
   visible sur ordinateur, sous le menu horizontal (vécu le 02/11/2026). Seules les dimensions sont touchées. */
@media (max-width: 1024px) {
  [data-tempo-widget="menu-mobile"] .elementor-menu-toggle { min-width: var(--cible-min); min-height: var(--cible-min); }
}
.mini-panier { min-width: var(--cible-min); }
/* Liens du pied : 22 px de haut, collés les uns aux autres sur téléphone. */
@media (max-width: 1024px) {
  [data-elementor-type="footer"] a { display: inline-block; min-height: var(--cible-min); padding-block: 0.6rem; }
}
/* Rubrique courante du menu de bureau : #4669A3 sur le noir de l'en-tête, 3,6:1 ; le bleu clair du pied, 8,3:1. */
[data-elementor-type="header"] { --e-global-color-ed58647: #8FA9D9; }

/* Coordonnées protégées (Pages\Antispam) : écrites à l'envers dans le source, à l'endroit à l'écran, en attendant que
   coquille.js les décode. */
.protege-inverse { unicode-bidi: bidi-override; direction: rtl; }

/* 9. Mouvement réduit ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .mini-panier, .btn, .bouton-icone, .tiroir, .tiroir::backdrop, .lien-evitement, .champ__saisie,
  .elementor-nav-menu__container {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  /* L'anneau de chargement tourne lentement plutôt que pas du tout : sans lui,
     un bouton occupé paraîtrait figé. */
  .btn[aria-busy="true"]::after { animation: tourner 1.6s linear infinite !important; }
  /* Pas de mise à l'échelle à l'appui : la couleur du survol et le focus suffisent à répondre. */
  .btn:active:not(:disabled), .mini-panier:active, .bouton-icone:active { transform: none; }
  .mini-panier__nombre--rebond { animation: none; }
}