/* ==========================================================================
   /offres — la grille tarifaire, et les mêmes sections dans les deux écrans
   d'abonnements connectés.
   Reprise de la maquette validée le 11/10/2026, classe par classe : la
   maquette portait tous ses styles en ligne, ils sont ici et nulle part
   ailleurs.

   LA POLICE. La maquette chargeait Montserrat depuis Google Fonts. Le site
   l'interdit à dessein — le CSS critique de `layout.php` redéclare Montserrat,
   Raleway, Cormorant Garamond, Playfair Display et Antic Didone avec des
   sources LOCALES seulement, sous un commentaire sans ambiguïté. Et
   `globals.css` donne déjà `'Montserrat', sans-serif` au corps de toutes les
   pages. On garde donc la règle du site : même déclaration, même rendu que
   partout ailleurs, aucune requête externe. Décision du 11/10/2026.

   Les couleurs, les tailles, les graisses et les espacements sont ceux de la
   maquette, au pixel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ISOLATION — à lire avant de toucher au reste.

   **Le nom `.offres` était déjà pris.** `globals.css` l. 1201 définit une
   « Offres Section » : `.offres { padding: 8rem 2rem; background: linear-
   gradient(...) }`, et `a-propos.css` en a une autre. Notre conteneur portait
   donc, sans que rien ne le dise, 128 px de marge haute et un fond dégradé
   crème venus d'ailleurs. Il s'appelle `.pageOffres` depuis le 11/10/2026 ;
   les classes internes gardent leur préfixe `offres`, qui ne heurte rien
   (`.offres-filtres` et `.offres-liste` de globals.css portent un trait
   d'union, pas une majuscule).

   Ce qui descend encore des feuilles du site, et que ce bloc neutralise :

     globals.css  * { margin:0; padding:0; box-sizing:border-box }
                  body { font-family:'Raleway'; line-height:1.6;
                         color: var(--gray-dark); background: var(--cream) }
                  body, input, … { font-family:'Montserrat' }   <- se
                         contredit avec la ligne précédente, même fichier
                  h1, h2, h3, … { font-family:'Playfair Display';
                         font-weight:300; letter-spacing:0.5px }
     header.css   body { font-family:'Montserrat'; font-weight:300;
                         letter-spacing:0.2px }                 <- troisième
                         déclaration de la police du corps
     critique.css body { line-height:1.5; font-family:-apple-system,… }
                  body,h1,h2,h3,h4,p,… { margin:0 }
                  img,picture,video,canvas,svg { max-width:100% }
                  @media(max-width:768px) body { font-size:16px }

   Les trois graisses et les deux interlettrages héritaient dans toute la
   page : les titres sortaient en 300 au lieu de 700, et chaque texte portait
   0,2 px d'écart entre les lettres. `globals.css` n'est pas modifié.
   Le relevé complet est dans `theme-doublons.txt`.
   -------------------------------------------------------------------------- */

.pageOffres,
.pageOffres * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.pageOffres,
.pageOffres h1,
.pageOffres h2,
.pageOffres h3,
.pageOffres p,
.pageOffres ul,
.pageOffres ol,
.pageOffres li,
.pageOffres span,
.pageOffres a {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: normal;
}

/* La graisse se pose sur le conteneur et descend par héritage : une règle
   `.pageOffres p { font-weight: 400 }` l'emporterait sur `.offresSurtitre`,
   qui demande 600, et écraserait les graisses de la maquette. */
/* `line-height: normal` sur le conteneur, et non sur chaque élément : la
   maquette n'en déclarait que sur quelques textes, les autres prenaient le
   `normal` du navigateur. Ici, `globals.css` donne 1.6 au corps, qui
   descendait partout — un titre de 34 px occupait 54 px de haut au lieu de
   41. Posé par héritage, chaque valeur explicite de la maquette l'emporte. */
.pageOffres { font-weight: 400; line-height: normal; }

.pageOffres h1,
.pageOffres h2,
.pageOffres h3 { font-weight: 700; }

.pageOffres img,
.pageOffres svg { max-width: 100%; display: block; }

.pageOffres ul,
.pageOffres ol { list-style: none; }

.pageOffres {
  --or:        #8A6A2C;
  --or-clair:  #B8913F;
  --encre:     #1E1E24;
  --gris:      #4B4B55;
  --gris-texte:#3C3C46;
  --bord:      #ECE6DA;
  --filet:     #E2DACB;
  --creme:     #F7F5F1;

  font-family: 'Montserrat', sans-serif;
  color: var(--encre);
  background: #FFFFFF;
  width: 100%;
}

/* La règle de couleur des liens de la maquette, mais jamais sur un bouton :
   `.pageOffres a` est plus spécifique que `.offresBouton`, et la couleur dorée
   l'emportait sur le blanc des boutons pleins — texte doré sur fond doré,
   donc invisible. Le `:not()` laisse les boutons à leurs propres règles. */
.pageOffres a:not([class*="offresBouton"]) { color: var(--or); }
.pageOffres a:not([class*="offresBouton"]):hover { color: #6E5220; }

/* Les titres suivent la police du corps, comme dans la maquette : sans ceci,
   `globals.css` leur impose 'Playfair Display' — le serif du site — et la
   page se lit en deux typographies. */
.pageOffres h1,
.pageOffres h2,
.pageOffres h3 { font-family: inherit; }

/* --- Sections ------------------------------------------------------------ */

.offresSection { background: #FFFFFF; padding: 96px 24px 104px; }

/* La maquette tenait l'en-tête et les trois cartes dans une seule section, à
   56 px d'écart. La partielle rend des sections complètes, pour pouvoir servir
   aussi dans les écrans connectés : l'en-tête et les formules sont donc deux
   sections, dont les marges rendent le même écart. */
/* SOUS L'EN-TÊTE FIXE : sa hauteur exacte, plus 48 px, pas davantage.
   `header.header` fait 80 px (header.css l. 28) et tombe à 60 px sous 768 px
   (critique.css l. 101). Elle est `position: fixed` : le contenu commence
   derrière elle, et c'est cette marge seule qui le dégage. */
/* SOUS L'EN-TÊTE FIXE : sa hauteur exacte, plus 48 px, pas davantage.
   `header.header` est `position: fixed` et mesure **80 px à toutes les
   largeurs** — le CSS critique annonce 60 px sous 768 px, mais `header.css`
   l. 28 est chargée après et impose 80, mesuré à 390 px de large. */
/* Écrans CONNECTÉS par défaut : le gabarit du tableau de bord pose déjà le
   dégagement de l'en-tête, en remettre un ici le doublait. */
.offresSection--entete { padding: 40px 24px 0; }

/* Page PUBLIQUE seulement — elle seule a l'en-tête fixe au-dessus d'elle.
   Le sélecteur distingue les deux sans toucher au PHP : la page publique
   rend un `main.pageOffres`, les écrans connectés un `div.pageOffres`. */
main.pageOffres .offresSection--entete { padding-top: 128px; }

/*
 * LE BLOC DE TEXTE NE DOIT PAS MESURER 440 PX DE HAUT.
 *
 * `.offresEnteteTexte` porte `flex: 1 1 440px` pour partager la ligne avec
 * la photo sur la page publique. Sur les écrans connectés il n'y a pas de
 * photo : le bloc est enfant direct de `.offresLarge`, une colonne flex, et
 * la base de 440 px devient une HAUTEUR. D'où 330 px de vide entre le
 * chapeau et les cartes, signalés le 12/10/2026.
 */
.offresLarge > .offresEnteteTexte { flex: 0 0 auto; }
.offresSection--formules { padding: 56px 24px 104px; }
.offresSection--creme { background: var(--creme); padding: 104px 24px 112px; }
.offresSection--devis { background: #FFFFFF; padding: 104px 24px; }
.offresSection--faq { background: var(--creme); padding: 96px 24px 120px; }

.offresLarge {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.offresLarge--option { gap: 64px; }
.offresLarge--devis,
.offresLarge--faq { gap: 36px; }

/* --- En-tête de page ----------------------------------------------------- */

.offresEntete {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 64px;
  align-items: center;
}

.offresEnteteTexte {
  flex: 1 1 440px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Le retour discret vers la page vitrine, au-dessus du surtitre. */
.offresRetour {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  align-self: flex-start;
}

.offresSurtitre {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or);
}

.offresTitre {
  margin: 0;
  font-size: 52px;
  line-height: 1.12;
  font-weight: 700;
  color: var(--encre);
}

.offresChapeau {
  margin: 0;
  font-size: 20px;
  line-height: 1.55;
  color: var(--gris);
}

/* La photo tient la place que l'emplacement réservé occupait dans la
   maquette : mêmes dimensions, mêmes coins arrondis. */
/* `width: 100%` ici valait 1160 px — la largeur du conteneur, et non celle
   de la colonne —, ce qui poussait la photo sous le titre au lieu de la
   placer à côté. La base flex suffit à la dimensionner. */
.offresPhoto {
  flex: 1 1 480px;
  min-width: 0;
  height: 380px;
  border-radius: 10px;
  object-fit: cover;
  max-width: 100%;
  display: block;
}

/* --- Les trois formules -------------------------------------------------- */

.offresFormules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  align-items: stretch;
}

.offresCarte {
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid var(--bord);
  border-top: 4px solid var(--or-clair);
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.offresCarte--vedette {
  border: 2px solid var(--or-clair);
  border-top: 4px solid var(--or-clair);
  padding: 33px 31px;
}

.offresCarteEntete {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.offresCarteNom {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--encre);
}

.offresPrix {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--encre);
}

.offresPrixUnite {
  font-size: 20px;
  font-weight: 600;
  color: var(--gris);
}

.offresPeriode {
  margin: 0;
  font-size: 15px;
  color: var(--gris);
}

.offresListe {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--filet);
  flex-grow: 1;
}

.offresListe li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--filet);
  font-size: 16px;
  line-height: 1.55;
  color: var(--encre);
}

.offresCoche {
  flex: none;
  margin-top: 3px;
}

/* --- Boutons ------------------------------------------------------------- */

.offresBouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 8px;
  border: 1.5px solid var(--encre);
  color: var(--encre);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
}
.offresBouton:hover { color: var(--encre); background: #F2EFE9; }

.offresBouton--plein {
  border-color: var(--or);
  background: var(--or);
  color: #FFFFFF;
}
.offresBouton--plein:hover { background: #6E5220; color: #FFFFFF; }

.offresBouton--large { padding: 0 34px; }
.offresBouton--gauche { align-self: flex-start; padding: 0 32px; }

/* --- Note sous les formules ---------------------------------------------- */

.offresNote {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gris);
}

/* --- L'option ------------------------------------------------------------ */

.offresOptionEntete {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 56px;
  align-items: center;
  justify-content: space-between;
}

.offresOptionTexte {
  flex: 1 1 560px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 860px;
}

.offresOptionTitre {
  margin: 0;
  font-size: 46px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--encre);
}

.offresOptionAccroche {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  color: var(--gris);
}

.offresSymbole {
  flex: 0 0 auto;
  width: 260px;
  max-width: 60%;
  height: auto;
}

.offresDeuxCartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.offresEncadre {
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid var(--bord);
  border-left: 4px solid var(--or);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.offresEncadre--encre { border-left-color: var(--encre); }

.offresEncadreTitre {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--encre);
}

.offresEncadreTexte {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--gris-texte);
}

.offresLienExterne {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

/* --- Le déroulé ---------------------------------------------------------- */

.offresBloc {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.offresBloc--recu { gap: 24px; }

.offresBlocEntete {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.offresBlocTitre {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  color: var(--encre);
}

.offresEtapes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.offresEtapes li {
  background: #FFFFFF;
  border-radius: 10px;
  border-top: 4px solid var(--or-clair);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.offresEtapeRang {
  font-size: 30px;
  font-weight: 700;
  color: var(--or);
}

.offresEtapeTexte {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--encre);
}

/* --- Ce que vous recevez ------------------------------------------------- */

.offresRecu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  column-gap: 48px;
  border-top: 1px solid var(--filet);
}

.offresRecu li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--filet);
  font-size: 17px;
  line-height: 1.55;
  color: var(--encre);
}

.offresPied {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.offresMention {
  margin: 0;
  font-size: 15px;
  color: var(--gris);
}

/* --- Sur devis ----------------------------------------------------------- */

.offresDevisTitre {
  margin: 0;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--encre);
}

.offresDevisCartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.offresDevisCarte {
  background: var(--creme);
  border-radius: 10px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.offresDevisCarteTitre {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--encre);
}

.offresDevisCarteTexte {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--gris-texte);
}

/* Dans la section « Sur devis », les cartes sont crème sur fond blanc ; dans
   les écrans connectés la section est rendue telle quelle. */
.offresSection--devis .offresDevisCarte { background: var(--creme); }

/* --- Questions fréquentes ------------------------------------------------ */

.offresFaqTitre {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  color: var(--encre);
}

.offresFaq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 24px;
}

.offresFaqItem {
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid var(--bord);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.offresFaqQuestion {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--encre);
}

.offresFaqReponse {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--gris-texte);
}

/* --- Téléphone ------------------------------------------------------------
   La maquette n'avait pas de point de rupture : ses grilles `auto-fit` se
   replient seules. Restent les titres, dimensionnés pour un grand écran, et
   les marges de section, qui mangeraient la moitié d'un écran de téléphone.
   -------------------------------------------------------------------------- */

/* L'en-tête passe à 60 px à 768 px, pas à 720 : son décalage a donc son
   propre point de rupture, sans quoi vingt pixels de trop subsistent entre
   les deux largeurs. */
@media (max-width: 720px) {
  .offresSection,
  .offresSection--creme,
  .offresSection--devis,
  .offresSection--faq { padding: 56px 20px 64px; }
  .offresSection--entete { padding: 32px 20px 0; }
  main.pageOffres .offresSection--entete { padding-top: 120px; }
  .offresSection--formules { padding: 32px 20px 56px; }

  .offresLarge,
  .offresLarge--option { gap: 40px; }

  .offresTitre { font-size: 34px; }
  .offresOptionTitre { font-size: 30px; }
  .offresDevisTitre,
  .offresFaqTitre { font-size: 28px; }
  .offresBlocTitre { font-size: 26px; }
  .offresChapeau,
  .offresOptionAccroche { font-size: 18px; }

  .offresPhoto { min-height: 220px; }
  .offresSymbole { width: 180px; max-width: 70%; }

  .offresCarte,
  .offresCarte--vedette { padding: 26px 22px; }

  .offresRecu { grid-template-columns: 1fr; }
  .offresFaq { grid-template-columns: 1fr; }
  .offresPied { justify-content: flex-start; }
  .offresBouton { width: 100%; }
}

/* --- ESSAI DU 12/10/2026 : le bouton de la carte « Illimité » -------------
   Il reprend la couleur du bouton « Inscription » de l'en-tête, c'est-à-dire
   le dégradé violet que `header.css` l. 209 pose sur `.purple-gradient` —
   celui que l'en-tête affiche en mode hôtel et partenaire ; en mode candidat
   il est doré, mais `/offres` est une page employeur et l'onglet Hôtel y est
   sélectionné, donc c'est bien le violet que le visiteur a sous les yeux.

   Un seul bloc, à retirer d'un coup si l'essai n'est pas retenu.
   -------------------------------------------------------------------------- */

.offresCarte--vedette .offresBouton {
  background: linear-gradient(135deg, #132032, #2b4566);
  border-color: #132032;
  color: #FFFFFF;
}

.offresCarte--vedette .offresBouton:hover {
  background: linear-gradient(135deg, #3a2740, #6a4a70);
  border-color: #3a2740;
  color: #FFFFFF;
}

/* ==========================================================================
   LE MOUVEMENT — ajouté le 12/10/2026.

   Règle qui gouverne tout ce bloc : **rien n'est caché tant que le script
   n'a pas posé `.offres-anime` sur le conteneur.** Sans JavaScript, aucune
   de ces règles d'état initial ne s'applique et la page s'affiche entière.
   C'est pourquoi chaque sélecteur part de `.offres-anime`.

   `prefers-reduced-motion` est traité deux fois, ceinture et bretelles : le
   script n'arme rien, et la requête média en fin de bloc neutralise ce qui
   aurait pu passer.
   ========================================================================== */

/* --- 1. Apparition au défilement ----------------------------------------- */

.offres-anime [data-anime],
.offres-anime [data-anime-symbole] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.offres-anime [data-anime].offres-vu,
.offres-anime [data-anime-symbole].offres-vu {
  opacity: 1;
  transform: translateY(0);
}

/* --- 2. Le reflet doré de la carte « Illimité », une seule fois ----------- */

.offresCarte--vedette { position: relative; overflow: hidden; }

.offresCarte--vedette::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 38%,
    rgba(201, 162, 39, 0.28) 48%,
    rgba(240, 208, 128, 0.55) 52%,
    rgba(201, 162, 39, 0.28) 56%,
    transparent 66%);
  transform: translateX(-120%);
  opacity: 0;
}

.offres-anime .offresCarte--vedette.offres-vu::after {
  animation: offresReflet 1400ms ease-out 260ms 1 forwards;
}

@keyframes offresReflet {
  0%   { transform: translateX(-120%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

/* --- 3. Survol et focus des cartes --------------------------------------- */

.offresCarte,
.offresDevisCarte,
.offresEncadre {
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}

.offresCarte:hover,
.offresCarte:focus-within,
.offresDevisCarte:hover,
.offresEncadre:hover,
.offresEncadre:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(30, 30, 36, 0.10);
}

/* Le liseré doré passe de 4 à 6 px sans déplacer le contenu : la bordure
   gagne deux pixels, le rembourrage en perd autant. */
.offresCarte:hover,
.offresCarte:focus-within { border-top-width: 6px; padding-top: 32px; }

.offresCarte--vedette:hover,
.offresCarte--vedette:focus-within { padding-top: 31px; }

.offresEncadre:hover,
.offresEncadre:focus-within { border-left-width: 6px; padding-left: 30px; }

/* Les boutons */
.offresBouton { transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease; }

.offresBouton:focus-visible,
.offresLienExterne:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
}

/* Un bouton en contour se remplit ; un bouton plein s'assombrit. */
.offresBouton:not(.offresBouton--plein):hover,
.offresBouton:not(.offresBouton--plein):focus-visible {
  background: var(--encre);
  color: #FFFFFF;
}

.offresBouton--plein:hover,
.offresBouton--plein:focus-visible { background: #6E5220; color: #FFFFFF; }

/* --- 4. Le fil doré des quatre temps ------------------------------------- */

.offresEtapes { position: relative; }

.offresEtapes::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, rgba(184,145,63,0.25), #B8913F, rgba(184,145,63,0.25));
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 0;
}

.offres-anime [data-anime-fil].offres-vu .offresEtapes::before {
  animation: offresFil 1100ms ease-out 200ms 1 forwards;
}

@keyframes offresFil { to { transform: scaleX(1); } }

.offresEtapes > li { position: relative; z-index: 1; }

/* Sur un écran étroit la grille se replie en colonne : le fil devient
   vertical, le long des numéros. */
@media (max-width: 720px) {
  .offresEtapes::before {
    left: 2px;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, rgba(184,145,63,0.25), #B8913F, rgba(184,145,63,0.25));
    transform: scaleY(0);
    transform-origin: center top;
  }
  .offres-anime [data-anime-fil].offres-vu .offresEtapes::before {
    animation-name: offresFilVertical;
  }
}

@keyframes offresFilVertical { to { transform: scaleY(1); } }

/* --- 5. La lévitation du symbole ----------------------------------------- */

.offres-anime .offresSymbole.offres-vu {
  animation: offresLevitation 6s ease-in-out 700ms infinite;
}

@keyframes offresLevitation {
  0%, 100% { transform: translateY(-4px); }
  50%      { transform: translateY(4px); }
}

/* --- 6. Les questions en accordéon --------------------------------------- */

.offresFaqItem { cursor: pointer; }

.offresFaqQuestion {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  cursor: pointer;
}

/* Safari pose son propre triangle : on le retire pour garder le chevron. */
.offresFaqQuestion::-webkit-details-marker { display: none; }

.offresFaqChevron {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-right: 2px solid var(--or-clair);
  border-bottom: 2px solid var(--or-clair);
  transform: rotate(45deg);
  transition: transform 250ms ease;
}

.offresFaqItem[open] .offresFaqChevron { transform: rotate(-135deg); }

/* L'ouverture : la grille à `0fr`/`1fr` anime une hauteur inconnue, ce
   qu'une transition sur `height` ne sait pas faire. */
.offresFaqCorps {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms ease;
}

.offresFaqItem[open] .offresFaqCorps { grid-template-rows: 1fr; }

.offresFaqCorps > .offresFaqReponse { overflow: hidden; min-height: 0; padding-top: 10px; }

/* --- 7. Mouvement réduit : tout visible, rien ne bouge ------------------- */

@media (prefers-reduced-motion: reduce) {
  .offres-anime [data-anime],
  .offres-anime [data-anime-symbole] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .offresCarte--vedette::after,
  .offres-anime .offresCarte--vedette.offres-vu::after { animation: none; opacity: 0; }
  .offresEtapes::before { transform: none; animation: none; }
  .offres-anime .offresSymbole.offres-vu { animation: none; }
  .offresCarte,
  .offresDevisCarte,
  .offresEncadre,
  .offresBouton,
  .offresFaqChevron,
  .offresFaqCorps { transition: none; }
}

/* --- Les boutons de paiement --------------------------------------------
   Dans un espace connecté, le bouton d'une formule est un `button` dans un
   `form` — un paiement se déclenche par un POST, jamais par un lien qu'un
   robot ou un préchargement pourrait suivre. Il doit se présenter comme les
   autres boutons de la page.
   -------------------------------------------------------------------------- */

.offresPaiement { margin: 0; display: contents; }

.offresPaiement > .offresBouton {
  width: 100%;
  font-family: inherit;
  cursor: pointer;
}

.offresPaiement--second > .offresLienExterne {
  background: none;
  border: 0;
  padding: 0;
  margin-top: -8px;
  color: var(--or);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

/* --- Le portail de facturation ------------------------------------------- */

/* Deux boutons depuis le 12/10/2026 — « Mes factures » et « Gérer mon moyen
   de paiement ». Ils se mettent l'un sous l'autre quand la place manque. */
.offresPortail {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.offresPortail form { margin: 0; }

.offresPortail .offresBouton { width: auto; font-family: inherit; cursor: pointer; }

/* --- La carte « Groupes et chaînes hôtelières » --------------------------- */
/*
 * Une carte seule, au centre, dans le même habit que les trois formules :
 * même bord, même or en bordure haute, mêmes listes à coches. Elle ne porte
 * pas de prix — un groupe se chiffre — et c'est la seule différence visible.
 */
.offresSection--groupes { padding: 64px 0; }

.offresCarte--groupes {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

.offresCarte--groupes .offresCarteTexte {
  margin: .6rem 0 1.2rem;
  line-height: 1.6;
  color: #4a4a4a;
}

.offresCarte--groupes .offresListe { margin-bottom: 1.6rem; }

@media (max-width: 640px) {
  .offresSection--groupes { padding: 44px 0; }
}

/* --- Les trois paliers de ProfilerTonus ----------------------------------- */
.offresPaliers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.6rem 0 0;
}

.offresPalier {
  border: 1px solid #e6e2da;
  border-top: 3px solid #d9d2c5;
  border-radius: 12px;
  padding: 1.1rem 1.2rem 1.3rem;
  background: #fff;
  text-align: center;
}

.offresPalier--vedette { border-top-color: #8A6A2C; }

.offresPalierTitre {
  margin: 0 0 .4rem;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8A6A2C;
  font-weight: 700;
}

.offresPalierPrix { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
.offresPalierUnitaire { margin: .15rem 0 1rem; font-size: .85rem; color: #777; }

.offresPaliersNote {
  margin: 1rem 0 0;
  font-size: .85rem;
  line-height: 1.6;
  color: #666;
  max-width: 62ch;
}

@media (max-width: 760px) {
  .offresPaliers { grid-template-columns: 1fr; }
}

/* Les conditions des cabinets, sous les prix. */
.offresConditions {
  list-style: none;
  margin: 1rem auto 0;
  padding: 0;
  max-width: 68ch;
  font-size: .84rem;
  line-height: 1.6;
  color: #777;
  text-align: center;
}
.offresConditions li { margin: .3rem 0; }
.offresConditions--carte { text-align: left; margin-top: .8rem; font-size: .8rem; }

/* L'ancre du sélecteur : l'en-tête du site est fixe et haut de 80 px ; sans
   cette marge, le haut de la section passerait dessous. */
#tarifs {
  scroll-margin-top: 96px;
}

/* ---------------------------------------------------------------------------
   LE SÉLECTEUR MENSUEL / ANNUEL — 13/10/2026.

   Deux liens dans un cadre doré clair, celui qui est actif rempli de doré.
   Pas de fond noir : la grille vit sur du blanc cassé, et un bloc sombre
   au-dessus des cartes aurait coupé la page en deux.

   Les deux positions font la même largeur, pour que le cadre ne change pas
   de taille d'une position à l'autre.
--------------------------------------------------------------------------- */
.offresPeriodes {
  display: flex;
  justify-content: center;
  margin: 0 0 2rem;
}
.offresPeriodesGroupe {
  display: inline-flex;
  padding: .28rem;
  border: 1px solid rgba(138, 106, 44, .32);
  border-radius: 999px;
  background: #FBF7EF;
  gap: .22rem;
}
/* La spécificité n'est pas un détail : `.pageOffres a:not([class*="offresBouton"])`
   impose déjà sa couleur dorée à tout lien de la page. Sans un sélecteur
   au moins aussi fort, le libellé de la position active s'écrivait en doré
   SUR le doré — invisible. Constaté à la capture du 13/10/2026. */
.offresPeriodesGroupe a.offresPeriodeChoix {
  min-width: 7.5rem;
  padding: .62rem 1.5rem;
  border-radius: 999px;
  font-family: var(--police-titre, 'Cormorant Garamond', Georgia, serif);
  font-size: 1rem;
  letter-spacing: .04em;
  color: #6B5420;
  text-align: center;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.offresPeriodesGroupe a.offresPeriodeChoix:hover,
.offresPeriodesGroupe a.offresPeriodeChoix:focus-visible {
  background: rgba(138, 106, 44, .12);
  color: #4A3A16;
}
.offresPeriodesGroupe a.offresPeriodeChoix--actif,
.offresPeriodesGroupe a.offresPeriodeChoix--actif:hover,
.offresPeriodesGroupe a.offresPeriodeChoix--actif:focus-visible {
  background: #8A6A2C;
  color: #FFF;
  box-shadow: 0 1px 4px rgba(138, 106, 44, .28);
}
/* Le repère du clavier reste visible sur les deux fonds. */
.offresPeriodesGroupe a.offresPeriodeChoix:focus-visible {
  outline: 2px solid #8A6A2C;
  outline-offset: 3px;
}

/*
 * **`hidden` NE SUFFIT PAS QUAND UNE RÈGLE POSE `display`.**
 *
 * `.offresListe li` est en `display: flex` ; l'attribut `hidden` du HTML ne
 * vaut qu'un `display: none` de la feuille de style du navigateur, que
 * n'importe quelle règle d'auteur écrase. La ligne « Ou 1 790 € HT par
 * an… » restait donc affichée après une bascule en annuel, en doublon du
 * prix. Vu à la capture du 13/10/2026 — le DOM, lui, disait « caché ».
 */
.offresListe li[hidden] {
  display: none;
}

/* La mention calculée sous le prix annuel. */
.offresMentionAnnuelle {
  margin: .35rem 0 0;
  font-size: .86rem;
  line-height: 1.45;
  color: #6B5420;
}

@media (max-width: 480px) {
  .offresPeriodesGroupe { width: 100%; }
  .offresPeriodesGroupe a.offresPeriodeChoix { flex: 1 1 0; min-width: 0; padding: .62rem .8rem; }
}