/* =====================================================================================
   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); }
/* Le logo occupe 2 des 6 colonnes, et non 3 : avec dix tuiles, 2 + 10 = 12 cellules, soit
   exactement deux rangées pleines. À 3 colonnes, la dixième tuile se retrouvait seule sur
   une troisième ligne. */
.menu-case--logo { border: 0; padding: 0; grid-column: span 2; }
.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); }

/* Apparition en cascade des tuiles. Durée et retards divisés par deux le 17/08/2026 :
   avec dix tuiles, la dernière n'arrivait qu'au bout d'1,6s — trop long pour un menu. */
.menu-plein.actif .menu-case { animation: apparait .3s forwards; }
.menu-plein.actif .menu-case:nth-child(1) { animation-delay: 0.05s; }
.menu-plein.actif .menu-case:nth-child(2) { animation-delay: 0.1s; }
.menu-plein.actif .menu-case:nth-child(3) { animation-delay: 0.15s; }
.menu-plein.actif .menu-case:nth-child(4) { animation-delay: 0.2s; }
.menu-plein.actif .menu-case:nth-child(5) { animation-delay: 0.25s; }
.menu-plein.actif .menu-case:nth-child(6) { animation-delay: 0.3s; }
.menu-plein.actif .menu-case:nth-child(7) { animation-delay: 0.35s; }
.menu-plein.actif .menu-case:nth-child(8) { animation-delay: 0.4s; }
.menu-plein.actif .menu-case:nth-child(9) { animation-delay: 0.45s; }
.menu-plein.actif .menu-case:nth-child(10){ animation-delay: 0.5s; }
@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; }
/* Hauteur EXPLICITE (05/10/2026) : le logo Caresquad est un SVG sans dimensions propres (un
   simple viewBox). Sur téléphone, son lien passe en inline-block et épouse son contenu ; la
   largeur « auto » d'une telle image y tombait à 0 — le logo était invisible sur mobile. Tous
   les logos s'affichaient déjà à 56 px de haut. object-fit : un logo plus large que sa case
   (remplacé depuis l'administration) est réduit dans la boîte au lieu d'être écrasé. */
.pied-partenaires img { height: 56px; max-height: 56px; width: auto; object-fit: contain; margin: 0 auto; display: block; }
/* Sept partenaires depuis l'ajout du Crédit Agricole Aquitaine (05/10/2026). Une rangée SOUPLE
   et non une grille : les sept logos sur une ligne en bureau, puis 4 + 3 sur tablette et
   2 + 2 + 2 + 1 sur téléphone, chaque ligne centrée — dans une grille, le septième tombait seul,
   calé à gauche. Chaque case garde la largeur d'une colonne : les logos restent alignés d'une
   ligne à l'autre. */
.partenaires { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 40px; }
.partenaires > div { flex: 0 0 calc(100% / 7); text-align: center; }
/* Badge « DPO déclaré à la CNIL » (Dipeeo). Dimensionné par la LARGEUR et non par la
   hauteur : son rapport est de 8:1 (721 x 90) là où les logos partenaires sont en 2:1.
   La règle .pied-partenaires (max-height: 56px) l'aurait rendu à 449 px de large.
   Discret mais lisible : 300 px de large, soit 37 px de haut, contre 56 px de haut pour
   les logos partenaires. Le texte du badge occupe environ 30 % de sa hauteur : en dessous
   de ~280 px de large il devient illisible. Une seule valeur à changer pour l'ajuster. */
.pied-conformite { margin-top: 26px; text-align: center; }
/* La réduction à 82 % porte sur le LIEN, pas sur l'image (05/10/2026) : portée par l'image,
   elle la rétrécissait à l'intérieur d'un lien resté à 300 px, et le badge se calait à gauche
   de la page sur téléphone. */
.pied-conformite a { display: inline-block; line-height: 0; max-width: 82%; }
.pied-conformite img { width: 300px; max-width: 100%; height: 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); }
  .partenaires > div { flex-basis: 25%; }
  .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); }
  .partenaires { row-gap: 28px; }
  .partenaires > div { flex-basis: 50%; }
  .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); }

/* =====================================================================================
   ZONES TACTILES (téléphone uniquement)
   Le doigt couvre environ 45 px : en dessous de 24, on vise à l'aveugle. On agrandit donc
   la surface sensible SANS toucher à ce qui se voit — le texte garde sa taille, c'est la
   zone cliquable, invisible, qui grandit.
   Technique : retrait interne compensé par une marge négative. La boîte de marge garde sa
   hauteur d'origine, donc la mise en page ne bouge pas d'un pixel.
   ===================================================================================== */
@media (max-width: 767px) {
  /* Liens du pied et rangée secondaire du menu : 18 px de haut, 10 px d'écart réel
     (mesuré, pas déduit). +5 px de part et d'autre -> 28 px de haut, au-dessus du seuil
     de 24, et les zones se touchent sans se chevaucher : deux cibles qui se recouvrent
     seraient pires que trop petites, on ne saurait plus laquelle on touche. */
  .pied-liens a,
  .pied-legal a,
  .menu-secondaire a {
    display: inline-block;
    padding: 5px 0;
    margin: -5px 0;
  }

  /* Téléphone et courriel : le seul endroit ou l'apparence bouge, et c'est necessaire.
     Ils etaient hauts de 16 px et separes de 2 px : impossible de leur donner 24 px chacun
     sans qu'ils se chevauchent, ce qui serait pire que trop petit (on ne sait plus ce qu'on
     touche). On leur donne donc leur propre ligne — le bloc d'adresse gagne 24 px. */
  .pied-coord .tel,
  .pied-coord .mel {
    display: inline-block;
    line-height: 30px;
  }

  /* Liens portant une image (LinkedIn, logos partenaires) : le lien doit epouser
     l'image, sinon sa zone sensible se limite a la hauteur d'une ligne de texte. */
  .pied-reseaux a,
  .pied-partenaires a,
  .rdv-doctolib a { display: inline-block; line-height: 0; }
}