/* =====================================================================================
   VIV MED — feuille de style du site
   Reconstruction propre du rendu WordPress/Divi. Toutes les valeurs (couleurs, tailles,
   interlignes, rayons, dégradés) sont relevées sur le site d'origine, pas approximées.
   Ordre : jetons → base → mise en page → composants → en-tête/menu → pied → adaptatif.
   ===================================================================================== */

/* --- Polices ------------------------------------------------------------------------
   Degular Display, auto-hébergée comme sur le site actuel. Les surcharges de métriques
   (ascent/descent) sont reprises telles quelles du thème enfant : sans elles, la hauteur
   des lignes change et toutes les pages se décalent verticalement.                      */
@font-face {
  font-family: 'degular';
  src: url('/assets/fonts/degulardisplay-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; size-adjust: 100%;
}
@font-face {
  font-family: 'degular';
  src: url('/assets/fonts/degulardisplay-regularitalic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
  /* Pas de surcharge de métriques ici : le thème d’origine ne la pose que sur
     la graisse normale de degulardisplay-regular. */
}
@font-face {
  font-family: 'degular';
  src: url('/assets/fonts/degulardisplay-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  /* Pas de surcharge de métriques ici : le thème d’origine ne la pose que sur
     la graisse normale de degulardisplay-regular. */
}
@font-face {
  font-family: 'degular-light';
  src: url('/assets/fonts/degulardisplay-light.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  /* Pas de surcharge de métriques ici : le thème d’origine ne la pose que sur
     la graisse normale de degulardisplay-regular. */
}
@font-face {
  font-family: 'degular-light';
  src: url('/assets/fonts/degulardisplay-lightitalic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
  /* Pas de surcharge de métriques ici : le thème d’origine ne la pose que sur
     la graisse normale de degulardisplay-regular. */
}

/* --- Jetons ------------------------------------------------------------------------- */
:root {
  --nuit:        #252550;   /* bleu nuit de la marque */
  --rose:        #F7D5DE;   /* rose du dégradé + titres sur fond nuit */
  --mauve:       #B9A3CE;   /* mauve du dégradé + intertitres */
  --gris-fond:   #F5F5F5;   /* fond de page dominant */
  --gris-texte:  #666666;   /* corps de texte */
  --blanc:       #FFFFFF;
  /* Le site emploie DEUX roses et DEUX mauves très proches, hérités de deux passes de
     maquettage. On les garde distincts pour rester au pixel près sur les libellés. */
  --rose-2:      #F7CDD4;   /* texte des boutons sur fond nuit */
  --mauve-2:     #B8A2CE;   /* mot « Inscription » de la newsletter */

  --degrade:     linear-gradient(90deg, var(--rose) 0%, var(--mauve) 100%);
  --degrade-bas: linear-gradient(180deg, var(--rose) 0%, var(--mauve) 100%);

  --conteneur:   1080px;    /* largeur de rangée standard (Divi) */
  --rayon-carte: 40px;
  --rayon-pilule: 100px;
  --rayon-visuel: 40px;

  --pile: 'degular', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --pile-light: 'degular-light', 'degular', 'Segoe UI', Roboto, Arial, sans-serif;
}

/* --- Base ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Corps de texte : 16px sur 18px d'interligne. C'est la règle du thème enfant du site
   d'origine (`p { font-size:16px; line-height:18px }`), volontairement très serrée.
   Toute la verticalité des pages en découle : la changer décale tout. */
body {
  margin: 0;
  background: var(--gris-fond);
  color: var(--gris-texte);
  font-family: var(--pile);
  font-size: 16px;
  line-height: 18px;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; border: 0; }
a { color: inherit; }

/* Lien d'évitement : invisible tant qu'il n'a pas le focus clavier. */
.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--nuit); color: #fff; padding: 12px 20px; border-radius: 0 0 12px 0;
  font-size: 15px; text-decoration: none;
}
.saut-contenu:focus { left: 0; }

/* --- Mise en page --------------------------------------------------------------------
   Divi construit ses pages en « sections » pleine largeur contenant une « rangée »
   centrée. On reproduit la même ossature, en nommant les variantes de largeur
   réellement utilisées sur le site.                                                     */
.sec { position: relative; padding: 54px 0; }
.sec--compact  { padding: 20px 0 0; }
.sec--nuit     { background: var(--nuit); color: #fff; }
.sec--blanc    { background: var(--blanc); }
.sec--gris     { background: var(--gris-fond); }
.sec--degrade  { background: var(--degrade); }

.rangee { width: 80%; max-width: var(--conteneur); margin: 0 auto; }
.rangee--etroite { width: 70%;  max-width: none; }
.rangee--moyenne { width: 80%;  max-width: none; }
.rangee--large   { width: 90%;  max-width: none; }
/* Divi ajoute 27px d'air en haut et en bas de chaque rangée, plus une marge basse sous
   les colonnes. Sans cette reprise, toutes les bandes se retrouvent trop courtes et la
   page entière se décale vers le haut. Les valeurs basses sont MESURÉES bande par bande
   sur le site d'origine (voir diff-sections.js), pas estimées. */
.sec > .rangee { padding: 27px 0; }
.sec--fleche > .rangee,
.sec--separateur > .rangee { padding: 0; }
.sec--nuit > .rangee        { padding: 27px 0 82px; }
.sec--valeurs > .rangee     { padding: 27px 0 40px; }
.sec--rdv > .rangee         { padding: 27px 0 91px; }
.sec--newsletter > .rangee  { padding: 27px 0 76px; }

.cols { display: grid; gap: 40px; align-items: start; }
.cols--2 { grid-template-columns: repeat(2, 1fr); }
.cols--3 { grid-template-columns: repeat(3, 1fr); }
.cols--4 { grid-template-columns: repeat(4, 1fr); }
.cols--6 { grid-template-columns: repeat(6, 1fr); }
.cols--centre { align-items: center; }

/* --- Typographie ---------------------------------------------------------------------
   Les titres du site mélangent deux graisses et deux styles dans une même ligne
   (« Valeurs » gras mauve + « et engagements » italique nuit). D'où des classes de
   fragment plutôt que des règles sur h2 seul.                                           */
h1, h2, h3, h4, h5, h6 { margin: 0 0 10px; font-weight: 400; color: var(--nuit); }

.titre-hero {
  font-family: var(--pile-light);
  font-size: 56px; line-height: 45px;
  padding-bottom: 10px;
}
.sous-titre-hero {
  font-family: var(--pile-light);
  font-size: 23px; line-height: 23px;
  color: var(--nuit);
  padding-bottom: 10px;
}
/* Titre de section : « mot fort » + « suite en italique ». */
.titre-sec {
  font-size: 53px; line-height: 40px;
  padding-bottom: 10px;
  color: var(--nuit);
}
.titre-sec .fort   { font-weight: 700; color: var(--mauve); }
.titre-sec .ital   { font-style: italic; }
.titre-sec--rose   { color: var(--rose); font-style: italic; }
.titre-sec--blanc  { color: #fff; }

.t-rose  { color: var(--rose); }
.t-mauve { color: var(--mauve); }
.t-mauve2{ color: var(--mauve-2); }
.t-nuit  { color: var(--nuit); }
.t-blanc { color: #fff; }
.t-gris  { color: var(--gris-texte); }
.ital    { font-style: italic; }
.fort    { font-weight: 700; }

p { margin: 0 0 18px; font-size: 16px; line-height: 18px; }
p:last-child { margin-bottom: 0; }

.texte        { font-size: 14px; line-height: 23.8px; color: var(--gris-texte); }
.texte--nuit  { color: var(--nuit); }
.texte--blanc { color: #fff; }
.texte--grand { font-size: 16px; line-height: 18px; }
.centre { text-align: center; }

ul.liste { margin: 0 0 23px; padding-left: 1.1em; list-style: disc; line-height: 26px; }
ul.liste li { margin-bottom: 4px; }

/* --- Boutons -------------------------------------------------------------------------
   Deux formes : pilule dégradée (action principale) et pilule contour (action seconde).
   Mesures relevées : rayon 100px, 20px de padding vertical, texte 16px/27.2px.           */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 20px 32px;
  border-radius: var(--rayon-pilule);
  font-size: 16px; line-height: 27.2px;
  color: var(--nuit); text-decoration: none;
  border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn--degrade { background-image: var(--degrade); }
.btn--contour { background: transparent; border-color: var(--nuit); }
.btn--nuit    { background: var(--nuit); color: var(--rose); font-size: 20px; line-height: 34px; }
.btn--large   { width: 100%; justify-content: center; }
.btn:hover    { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37,37,80,.14); }
.btn:focus-visible { outline: 2px solid var(--nuit); outline-offset: 3px; }
.btn img, .btn svg { width: 40px; height: auto; flex: none; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }

/* --- Cartes et pictogrammes ----------------------------------------------------------- */
.carte {
  background: var(--blanc);
  border-radius: var(--rayon-carte);
  padding: 40px 30px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(149,157,165,.12);
}
.carte h3, .carte-titre { color: var(--mauve); font-size: 20px; line-height: 18px; margin-bottom: 12px; }
.carte img { width: auto; max-height: 70px; margin: 0 auto 22px; display: block; }

.picto { display: block; margin: 0 auto 10px; width: auto; max-height: 70px; }
.picto-libelle { color: var(--mauve); text-align: center; font-size: 20px; line-height: 18px; }

/* Visuel arrondi (photos du site). Les visuels d'origine portent déjà leurs coins
   arrondis dans le fichier : le rayon CSS n'est là que pour les images remplacées
   plus tard depuis la photothèque. */
.visuel { border-radius: var(--rayon-visuel); display: block; width: 100%; height: auto; }

/* --- Blocs propres à l'accueil ---------------------------------------------------------- */
.sec--hero { padding: 2px 0 18px; }
.sec--hero > .rangee { padding: 29px 0; }
/* Colonnes du héros et de la bande « Le centre » : 476px chacune, 56px d'écart. */
.rangee--etroite .cols--2 { gap: 56px; }
.hero-picto { display: block; width: 48px; height: auto; margin-bottom: 12px; }
/* Les deux boutons du héros font exactement la même largeur sur le site d'origine. */
.hero-actions { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 26px; }
.hero-actions .btn { width: 223px; justify-content: center; padding-left: 20px; padding-right: 20px; }
.hero-visuel { max-width: 442px; margin-left: auto; }
.sec--fleche { padding: 0 0 30px; text-align: center; }
/* La pastille « viv » chevauche les deux bandes qu'elle sépare : elle ne prend aucune
   hauteur dans le flux (comportement du site d'origine, où la section est superposée). */
.sec--separateur { padding: 0; background: transparent; margin: -60px 0; position: relative; z-index: 3; }
.sur-titre { font-family: var(--pile-light); font-style: italic; font-size: 21px; line-height: 21px; color: #fff; margin-bottom: 22px; }
.sec--valeurs { padding: 54px 0 131px; }
/* Les trois cartes ont la même hauteur, comme les colonnes Divi qui s'étirent. */
.valeurs-cartes { margin-top: 43px; align-items: stretch; }
.valeurs-cartes .carte { display: flex; flex-direction: column; }
.plateau-titre { margin-top: 164px; }
.plateau { margin-top: 37px; }
.sec--valeurs .titre-sec, .sec--newsletter .titre-sec { margin-bottom: 29px; }
.plateau-note { font-size: 22px; line-height: 18px; font-weight: 700; color: var(--nuit); }

/* Pastille « viv » en marque de séparation entre deux sections */
.marque-blob { display: block; margin: 0 auto; width: 147px; height: auto; }

/* Flèche « descendre » */
.fleche-bas { display: block; margin: 0 auto; width: 43px; height: auto; }

/* Filigrane décoratif (chevrons pâles) posé sur le bord d'une section */
.filigrane {
  position: absolute; top: 0; height: 100%; width: auto; pointer-events: none;
  opacity: 1; z-index: 0;
}
.filigrane--droite { right: 0; }
.filigrane--gauche { left: 0; }
.sec > .rangee { position: relative; z-index: 1; }

/* --- Bande « Prise de rendez-vous » ----------------------------------------------------
   Section pleine largeur en dégradé, filigrane de chevrons à gauche, texte à gauche et
   trois étapes numérotées à droite.                                                       */
.sec--rdv { background-image: var(--degrade); overflow: hidden; }
.sec--rdv .cols--2 { gap: 60px; }
.rdv-calendrier { display: block; margin: 0 auto 30px; width: 122px; height: auto; }
.rdv-titre { text-align: center; }
.rdv-accroche { font-size: 22px; line-height: 18px; color: var(--nuit); text-align: center; margin-top: 16px; }
.etape { display: grid; grid-template-columns: 78px 1fr; gap: 40px; align-items: start; margin-bottom: 30px; }
.etape:last-child { margin-bottom: 0; }
.etape-pastille { width: 78px; height: 78px; flex: none; }
.etape p { font-size: 16px; line-height: 18px; color: var(--nuit); margin-bottom: 14px; }
.rdv-doctolib { margin: 14px 0 0; }
.rdv-doctolib img { width: 171px; height: auto; }
.rdv-tel { font-size: 19px; font-weight: 800; text-decoration: underline; color: var(--nuit); }

/* « Boutons » de la bande : pilules pleine largeur de colonne. */
.btn-bande {
  display: block; text-align: center; text-decoration: none;
  padding: 20px 40px; border-radius: var(--rayon-pilule);
  font-size: 20px; line-height: 23.8px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-bande--nuit  { background: var(--nuit); color: var(--rose-2); }
.btn-bande--blanc { background: var(--blanc); color: var(--nuit); }
.btn-bande:hover  { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37,37,80,.16); }
.btn-bande:focus-visible { outline: 2px solid var(--nuit); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn-bande { transition: none; } .btn-bande:hover { transform: none; } }

/* --- Encart Newsletter ------------------------------------------------------------------ */
.sec--newsletter .newsletter-icone { display: block; margin: 0 auto 29px; width: 116px; height: auto; }
/* Le champ et le bouton sont légèrement en retrait de la rangée et collés l'un à l'autre. */
.newsletter-form { margin-top: 55px; padding: 0 25px; }
.newsletter-form .champ { margin-bottom: 0; }
.newsletter-form .champ input { padding: 20px 24px; }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Formulaires ----------------------------------------------------------------------
   Champs blancs très arrondis avec ombre douce, comme sur le site actuel.                */
.champ { margin-bottom: 16px; }
.champ label { display: block; margin-bottom: 6px; font-size: 14px; color: var(--nuit); }
.champ input, .champ textarea, .champ select {
  width: 100%; padding: 16px 24px;
  border: 1px solid transparent; border-radius: 30px;
  background: var(--blanc); color: var(--nuit);
  font-family: inherit; font-size: 16px; line-height: 24px;
  box-shadow: rgba(149,157,165,.2) 0 8px 24px;
}
.champ textarea { border-radius: 24px; min-height: 150px; resize: vertical; }
.champ input:focus, .champ textarea:focus { outline: 2px solid var(--mauve); outline-offset: 2px; }
.champ--erreur input, .champ--erreur textarea { border-color: #C0392B; }
.erreur { color: #A93226; font-size: 13px; margin-top: 6px; }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.envoi {
  background-image: var(--degrade); color: var(--nuit);
  border: 0; border-radius: var(--rayon-pilule);
  padding: 20px 40px; font-family: inherit; font-size: 16px; cursor: pointer;
}
.message-ok {
  background: var(--blanc); border-left: 4px solid var(--mauve);
  border-radius: 12px; padding: 18px 22px; color: var(--nuit);
}

/* =====================================================================================
   EN-TÊTE + MENU PLEIN ÉCRAN
   Le site n'a pas de barre de navigation : un bouton rond ouvre une grille plein écran.
   Comportement et animations repris du CSS personnalisé du site.
   ===================================================================================== */
.tete {
  position: relative; z-index: 20;
  padding: 20px 0 0;
  background: var(--gris-fond);
}
/* Le logo est calé à 40px du bord (et non sur la grille des rangées) et suivi de 27px
   d'air : c'est ce qui donne au bandeau ses 114px de haut sur le site d'origine. */
.tete .rangee { display: flex; align-items: center; max-width: none; width: auto; margin: 0; padding-left: 40px; }
.tete-logo img { width: 215px; height: auto; display: block; margin-bottom: 27px; }

.menu-bouton {
  position: fixed; top: 20px; right: 45px;
  width: 79px; height: 79px;
  border: 0; padding: 0; background: none; cursor: pointer;
  z-index: 1100;
}
.menu-bouton img { width: 79px; height: 79px; display: block; }
.menu-bouton .icone-fermer { display: none; }
.menu-bouton[aria-expanded="true"] .icone-ouvrir { display: none; }
.menu-bouton[aria-expanded="true"] .icone-fermer { display: block; }

body.menu-ouvert { overflow: hidden; }

/* Le menu est une colonne qui défile : grille de rubriques, puis rangée secondaire.
   La rangée secondaire était auparavant en position absolue, collée à 40px du bas — dès que
   la grille dépassait la hauteur de l'écran (le cas sur téléphone), elle se superposait aux
   dernières tuiles. Elle est désormais dans le flux, sous la grille. */
.menu-plein {
  position: fixed; inset: 0; z-index: 1050;
  background: var(--nuit);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s ease, visibility .4s ease;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 24px 0;
}
.menu-plein.actif { opacity: 1; visibility: visible; pointer-events: auto; }
.menu-plein::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 300px; height: 400px; pointer-events: none;
  background: url('/assets/img/vivmed-right-side-section.webp') no-repeat center / contain;
}

.menu-grille {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px;
  width: 80%; max-width: 1400px; margin: 0 auto; text-align: center;
  position: relative; z-index: 1; flex: none;
}
.menu-case {
  border: 1px solid #f7e6f0; border-radius: 55px; padding: 20px;
  color: #fff; opacity: 0; transform: translateY(20px);
  transition: background-color .3s ease, transform .3s ease;
}
.menu-case a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; text-decoration: none; color: inherit;
}
.menu-case img { width: 60%; max-width: 70px; margin-bottom: 10px; object-fit: contain; }
.menu-case span { display: block; margin-top: 10px; font-size: 14px; }
.menu-case:hover { background: rgba(255,255,255,.05); transform: translateY(-5px); }
.menu-case--logo { border: 0; padding: 0; grid-column: span 3; }
.menu-case--logo img { max-width: 80%; width: auto; margin: 0 auto; padding: 25px 0; }
/* Case « Prendre rendez-vous » : seule case pleine du menu. */
.menu-case--rdv { border-color: transparent; background-image: var(--degrade-bas); color: var(--nuit); }
.menu-case--rdv:hover { background-image: var(--degrade-bas); }

/* Rangée secondaire du menu. Les entrées sans destination sont des <span> : même
   apparence, mais rien de cliquable qui ne mènerait nulle part. */
.menu-secondaire {
  flex: none;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  list-style: none; margin: 34px auto 0; padding: 0 20px;
  width: 80%; max-width: 1400px;
  font-size: 14px; color: #fff; z-index: 1;
}
.menu-secondaire a { color: #fff; text-decoration: none; }
.menu-secondaire a:hover { text-decoration: underline; }
.menu-secondaire span { color: rgba(255,255,255,.72); }

.menu-plein.actif .menu-case { animation: apparait .6s forwards; }
.menu-plein.actif .menu-case:nth-child(1) { animation-delay: .1s; }
.menu-plein.actif .menu-case:nth-child(2) { animation-delay: .2s; }
.menu-plein.actif .menu-case:nth-child(3) { animation-delay: .3s; }
.menu-plein.actif .menu-case:nth-child(4) { animation-delay: .4s; }
.menu-plein.actif .menu-case:nth-child(5) { animation-delay: .5s; }
.menu-plein.actif .menu-case:nth-child(6) { animation-delay: .6s; }
.menu-plein.actif .menu-case:nth-child(7) { animation-delay: .7s; }
.menu-plein.actif .menu-case:nth-child(8) { animation-delay: .8s; }
.menu-plein.actif .menu-case:nth-child(9) { animation-delay: .9s; }
.menu-plein.actif .menu-case:nth-child(10){ animation-delay: 1s; }
@keyframes apparait { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .menu-plein.actif .menu-case { animation: none; opacity: 1; transform: none; }
  .menu-plein, .menu-case { transition: none; }
}

/* =====================================================================================
   PIED DE PAGE
   Bloc bleu nuit très arrondi, surmonté de la pastille « viv », suivi de la bande des
   partenaires puis de la ligne légale.
   ===================================================================================== */
.pied { background: var(--gris-fond); padding: 0 0 23px; }
.pied-marque { margin-bottom: -60px; position: relative; z-index: 2; }
/* Le retrait interne du bloc (120px) et l'écart entre colonnes (26px) sont mesurés sur
   le site d'origine : ce sont eux qui placent les 4 colonnes aux mêmes abscisses. */
.pied-bloc {
  background: var(--nuit); color: #fff;
  border-radius: var(--rayon-carte);
  padding: 70px 120px 50px;
}
.pied-bloc .cols--4 { gap: 26px; }
.pied-bloc a { color: #fff; }
.pied-bloc .btn { color: var(--nuit); font-size: 20px; line-height: 34px; padding: 20px 40px; }
.pied-logo { width: 220px; height: auto; display: block; margin-bottom: 34px; }
.pied-coord { font-size: 16px; line-height: 18px; }
.pied-coord .tel { font-weight: 700; text-decoration: underline; }
.pied-coord .mel { font-style: italic; text-decoration: underline; }
.pied-reseaux { margin-top: 20px; }
.pied-reseaux img { width: 185px; height: auto; }
.pied-liens { list-style: none; margin: 0; padding: 0; font-size: 16px; line-height: 22.4px; }
.pied-liens li { margin-bottom: 10px; }
.pied-liens a { text-decoration: underline; }
.pied-liens--inertes span { color: rgba(255,255,255,.9); }
.pied-note { color: var(--rose); margin-top: 26px; font-size: 16px; line-height: 18px; }
.pied-partenaires { margin-top: 46px; }
.pied-partenaires img { max-height: 56px; width: auto; margin: 0 auto; display: block; }
.pied-legal { margin-top: 34px; color: var(--gris-texte); font-size: 16px; line-height: 18px; }
.pied-legal a { text-decoration: none; }
.pied-legal a:hover { text-decoration: underline; }

/* =====================================================================================
   ADAPTATIF
   Deux ruptures suffisent : tablette (une colonne de moins) et téléphone (tout empilé).
   ===================================================================================== */
@media (max-width: 1100px) {
  .rangee, .rangee--etroite, .rangee--moyenne, .rangee--large { width: 88%; max-width: 900px; }
  .cols--4 { grid-template-columns: repeat(2, 1fr); }
  .cols--6 { grid-template-columns: repeat(3, 1fr); }
  .menu-grille { grid-template-columns: repeat(3, 1fr); }
  .menu-case--logo { grid-column: 1 / -1; }
  .titre-hero { font-size: 46px; line-height: 42px; }
  .titre-sec  { font-size: 42px; line-height: 38px; }
  .filigrane { display: none; }
}

@media (max-width: 767px) {
  .rangee, .rangee--etroite, .rangee--moyenne, .rangee--large { width: 90%; max-width: none; }
  .sec { padding: 40px 0; }
  .cols { gap: 28px; }
  .cols--2, .cols--3, .cols--4 { grid-template-columns: 1fr; }
  .cols--6 { grid-template-columns: repeat(2, 1fr); }
  .titre-hero { font-size: 36px; line-height: 36px; }
  .titre-sec  { font-size: 32px; line-height: 32px; }
  .sous-titre-hero { font-size: 20px; line-height: 24px; }
  .tete-logo img { width: 160px; }
  .menu-bouton { top: 14px; right: 14px; width: 55px; height: 55px; }
  .menu-bouton img { width: 55px; height: 55px; }
  .menu-grille { grid-template-columns: repeat(2, 1fr); width: 90%; }
  .menu-secondaire { width: 90%; gap: 12px 18px; margin-top: 28px; }
  .menu-plein { justify-content: flex-start; padding: 84px 0 32px; }
  .menu-case img { width: 50%; max-width: 50px; }
  .menu-plein::after { display: none; }
  .pied-bloc { padding: 60px 26px 40px; }
  .pied-marque { margin-bottom: -46px; }
  .btn { padding: 16px 24px; }
}

/* --- Messages de formulaire ------------------------------------------------------------- */
.message-erreur {
  background: #FDECEA; border-left: 4px solid #C0392B;
  border-radius: 12px; padding: 18px 22px; color: #922B21;
  margin-bottom: 24px;
}
.message-ok { margin-bottom: 24px; }
.form-aide { font-size: 14px; line-height: 20px; color: var(--gris-texte); margin-top: 10px; }

/* --- Pages de texte (mentions légales, politique de confidentialité) -------------------
   Mise en page reprise du « Portail de transparence » : bande blanche, titre 28 px,
   corps 16/18, colonne de 1080 px. Ces règles sont dans le socle parce qu'elles
   servent deux pages. */
.sec--texte { padding: 54px 0; }
.sec--texte .titre-page {
  font-size: 28px; line-height: 32px; color: var(--nuit);
  margin-bottom: 26px;
}
.sec--texte .chapo {
  font-size: 18px; line-height: 24px; color: var(--nuit);
  margin-bottom: 34px;
}
.sec--texte .titre-bloc {
  font-size: 22px; line-height: 26px; color: var(--mauve);
  font-weight: 700; margin: 40px 0 12px;
}
.sec--texte .titre-sous-bloc {
  font-size: 18px; line-height: 22px; color: var(--nuit);
  font-weight: 700; margin: 26px 0 10px;
}
.sec--texte p { color: var(--nuit); margin-bottom: 16px; max-width: 78ch; }
.sec--texte a { color: var(--nuit); text-decoration: underline; }
.sec--texte a:hover { color: var(--mauve); }