/* Règles propres à la page « living-lab » — engendré depuis maquette/corps/living-lab.css */
/* =====================================================================================
   LIVING LAB
   Sept bandes propres à cette page : l’introduction illustrée (+ flèche de descente), les
   défis et les chiffres, le modèle en quatre temps sur fond dégradé, les quatre
   laboratoires en cartes, les engagements, les projets structurants sur fond grainé, puis
   les profils et l’ambition.
   Toutes les valeurs (largeurs de colonnes, marges de module, tailles de police) sont
   MESURÉES sur le site d’origine — voir reference/outline/living-lab.json — et non
   estimées : c’est ce qui donne des bandes à la même hauteur au pixel près.

   ÉCARTS VOLONTAIRES au relevé, demandés par le client le 17/08/2026. Ils font diverger
   cette page de reference/shots/ et de reference/outline/ : diff-geo.js et diff-sections.js
   les signaleront. Ce sont des choix, pas des dérives — ne pas les « corriger ».
     · L’original composait en 14px/23,8px le 1er item de « Ce que nous souhaitons proposer »
       et de « Projets structurants », ainsi que les piliers « Soigner » et « Améliorer »
       (paragraphes mal fermés côté WordPress). Tout est désormais en 16px/18px, la règle
       de corps du site.
     · La bande « Nos quatre laboratoires » n’est plus en cartes mais en sommaire.
   ===================================================================================== */

/* L’air laissé sous un module Divi vaut 29,6875px — et non 30. La fraction se cumule
   six fois dans la hauteur de la page ; arrondie, elle décale les bandes du bas. */
body[data-page="living-lab"] { --air-module: 29.6875px; }

/* Grille Divi de cette page : colonnes 1/4 et 1/5 avec une gouttière de 3 % de la rangée
   (32,4px sur 1080). C’est elle qui place les cartes aux abscisses de l’original. */
@media (min-width: 1101px) {
  /* Deux demi-colonnes de la bande d’introduction : 47,25 % + 5,5 % de gouttière. */
  body[data-page="living-lab"] .rangee-ll-hero .cols--2 {
    grid-template-columns: 47.25% 47.25%;
    gap: 5.5%;
  }
  body[data-page="living-lab"] .ll-piliers { grid-template-columns: repeat(4, 22.75%); gap: 3%; }
  body[data-page="living-lab"] .ll-profils { grid-template-columns: repeat(5, 17.6%); gap: 3%; }
}

/* --- Bande d’introduction ---------------------------------------------------------------
   L’original ne laisse qu’un seul pixel sous la rangée de la flèche : c’est ce qui colle
   la bande suivante à la flèche.                                                         */
body[data-page="living-lab"] .sec--ll-hero { padding: 54px 0 1px; }

/* Pictogramme de rubrique, calé à gauche au-dessus du sur-titre. */
body[data-page="living-lab"] .ll-picto {
  display: block; width: 51px; height: auto; margin: 0 0 9px;
}

/* Sur-titre : le libellé de la rubrique en petit, au-dessus du grand titre. Les 10px de
   retrait bas sont ceux que Divi pose sous ses titres — ils font partie de la hauteur. */
body[data-page="living-lab"] .ll-surtitre {
  font-size: 14px; line-height: 23.8px; color: var(--nuit);
  margin: 0 0 9px; padding-bottom: 10px;
}

/* Titre de page : 53px/40px, rose pour la première moitié, bleu nuit pour la seconde. */
body[data-page="living-lab"] .ll-titre {
  font-size: 53px; line-height: 40px; color: var(--rose);
  margin: 0 0 17px; padding-bottom: 0;
}

/* Texte de présentation : 14px sur 23,8px d’interligne — plus aéré que le corps de texte
   du reste de la page. Relevé tel quel sur l’original. */
body[data-page="living-lab"] .ll-intro {
  font-size: 14px; line-height: 23.8px; color: var(--nuit); margin: 0 0 16px;
}

/* La devise en trois lignes, au corps de texte normal. */
body[data-page="living-lab"] .ll-devise {
  font-size: 16px; line-height: 18px; color: var(--nuit); margin: 0 0 var(--air-module);
}

/* Chaque pilule occupe sa propre ligne : le conteneur est une boîte souple pour que sa
   hauteur soit exactement celle du bouton, sans la ligne de base d’un paragraphe. */
body[data-page="living-lab"] .ll-action {
  display: flex; justify-content: flex-start; margin: 0 0 var(--air-module);
}
body[data-page="living-lab"] .ll-action--fin { margin-bottom: 0; }

/* Les pilules de cette page ont 20px de retrait sur les quatre côtés (et non les 32px
   horizontaux du socle). Celle en dégradé n’a pas de filet : elle est 2px moins haute. */
body[data-page="living-lab"] .ll-btn { padding: 20px; }
body[data-page="living-lab"] .ll-btn.btn--degrade { border: 0; }

/* Illustration de la colonne de droite, centrée dans sa demi-colonne. */


/* Flèche de descente, centrée sur sa propre rangée, à sa taille naturelle (62,5px). */
body[data-page="living-lab"] .ll-fleche {
  display: block; width: 62.5px; height: auto; margin: 0 auto;
}

/* --- Titres et corps de texte communs aux bandes de contenu ------------------------------ */

/* Intertitre mauve : 36px, avec le retrait bas de 10px des titres Divi. */
body[data-page="living-lab"] .ll-h2 {
  font-size: 36px; line-height: 36px; color: var(--mauve);
  margin: 0; padding-bottom: 10px;
}
body[data-page="living-lab"] .ll-h2--espace { margin-bottom: var(--air-module); }

/* Corps de texte des bandes : 16px sur 18px, séparé de 1em (16px) et non des 18px du
   socle. Sur une page qui empile vingt paragraphes, l’écart se voit. */
body[data-page="living-lab"] .ll-texte {
  font-size: 16px; line-height: 18px; color: var(--nuit); margin: 0 0 16px;
}
body[data-page="living-lab"] .ll-texte--fin { margin-bottom: 0; }

/* Énumération sans puce : le chevron « > » du site tient lieu de marqueur, il fait partie
   du texte en gras comme sur l’original. Une ligne par entrée, sans air entre elles. */
body[data-page="living-lab"] .ll-liste {
  list-style: none; margin: 0 0 16px; padding: 0;
  font-size: 16px; line-height: 18px; color: var(--nuit);
}
body[data-page="living-lab"] .ll-liste li { margin: 0; }

/* --- Bande « Les défis et les chiffres » -------------------------------------------------- */
body[data-page="living-lab"] .sec--ll-defis { padding: 0 0 54px; }

/* --- Bande « Notre modèle » (dégradé) ----------------------------------------------------- */
body[data-page="living-lab"] .sec--ll-modele { padding: 54px 0; }

/* Les quatre colonnes ne sont pas égalisées : chacune s’arrête à la fin de son texte. */
body[data-page="living-lab"] .ll-piliers { align-items: start; }

body[data-page="living-lab"] .ll-pilier-img {
  display: block; width: auto; height: 86px; margin: 0 auto 16.1875px;
}
body[data-page="living-lab"] .ll-pilier-titre {
  font-size: 26px; line-height: 26px; color: var(--nuit); text-align: center;
  margin: 0 0 10px; padding-bottom: 10px;
}
/* Les deux dernières colonnes laissent 6px de plus sous leur intitulé que les deux
   premières : leurs textes commencent donc 6px plus bas. C’est ainsi sur l’original. */
body[data-page="living-lab"] .ll-pilier-titre--bas { margin-bottom: 16.1875px; }

body[data-page="living-lab"] .ll-pilier-texte {
  font-size: 16px; line-height: 18px; color: var(--nuit); text-align: center; margin: 0;
}

/* --- Cartes blanches (laboratoires et profils) -------------------------------------------
   Même gabarit dans les deux bandes : fond blanc, coins à 40px, 15px de retrait interne,
   ombre très douce. Les cartes d’une même rangée sont égalisées en hauteur.               */
body[data-page="living-lab"] .ll-carte {
  background: var(--blanc);
  border-radius: 40px;
  padding: 15px;
  box-shadow: rgba(0, 0, 0, .3) 0 2px 18px -12px;
}
body[data-page="living-lab"] .ll-carte-titre {
  font-size: 16px; line-height: 16px; font-weight: 800; color: var(--nuit);
  text-align: center; margin: 0; padding-bottom: 10px;
}
body[data-page="living-lab"] .ll-carte-texte {
  font-size: 15px; line-height: 15px; color: var(--nuit);
  text-align: center; margin: 0; padding-bottom: 10px;
}

/* La rangée de cartes ne prend pas les 27px d’air haut des autres rangées : elle est
   collée au titre de bande. */
body[data-page="living-lab"] .rangee-ll-cartes { padding-top: 0; }

/* --- Bande « Nos quatre laboratoires » ------------------------------------------------------
   Sommaire de revue scientifique, et non plus quatre cartes : le nom du laboratoire tient
   une colonne étroite à gauche, son périmètre la colonne large à droite, et un filet très
   pâle sépare les entrées. Demande du client : « une petite liste sans image, ça peut
   alléger un peu la présentation ».
   Le gabarit .ll-carte n'est PAS touché : il sert encore la bande « VOUS ÊTES… ». D'où de
   nouvelles classes (.ll-sommaire, .ll-labo, .ll-labo-nom, .ll-labo-texte) plutôt qu'une
   surcharge de .ll-carte / .ll-carte-titre / .ll-carte-texte.                             */
body[data-page="living-lab"] .sec--ll-labos { padding: 0 0 54px; }

/* Filet de séparation : le bleu nuit de la marque à 12 %. Assez pour poser la ligne, trop
   peu pour qu'elle se lise comme un trait. Écrit en jeton local parce que rgba() ne sait
   pas consommer var(--nuit) : la valeur n'est donc saisie qu'une seule fois. */
body[data-page="living-lab"] .ll-sommaire { --ll-filet: rgba(37, 37, 80, .12); }

/* Une entrée = une rangée de deux cellules. Colonne de gauche à 26 % de la rangée (281px
   MESURÉS sur 1080) : la largeur d'un intitulé de sommaire, pas celle d'un titre. La
   gouttière de 4 % (43px) reste dans la famille des 3 % de la grille de la page.
   minmax(0, 1fr) empêche la colonne de droite d'élargir la grille si un mot est long. */
body[data-page="living-lab"] .ll-labo {
  display: grid;
  grid-template-columns: 26% minmax(0, 1fr);
  column-gap: 4%;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--ll-filet);
}
/* Le filet sépare, il n'encadre pas : rien au-dessus de la première entrée, rien sous la
   dernière, et pas d'air perdu en haut ni en bas de la liste. */
body[data-page="living-lab"] .ll-labo:first-child { border-top: 0; padding-top: 0; }
body[data-page="living-lab"] .ll-labo:last-child  { padding-bottom: 0; }

/* Nom du laboratoire : 20px gras bleu nuit, aligné à gauche, sans le retrait bas que le
   socle pose sous les titres. L'interligne de 23,8px est celui du texte de droite : les
   premières lignes des deux colonnes se posent ainsi sur la même ligne de base (MESURÉ :
   même ordonnée pour les quatre entrées). */
body[data-page="living-lab"] .ll-labo-nom {
  font-size: 20px; line-height: 23.8px; font-weight: 700; color: var(--nuit);
  text-align: left; margin: 0; padding: 0;
}

/* Périmètre : corps de texte 16px sur 23,8px — l'interligne aéré déjà employé sur la page —
   en gris de texte. C'est là que la bande s'allège : les cartes composaient en 15px sur
   15px, centré. */
body[data-page="living-lab"] .ll-labo-texte {
  font-size: 16px; line-height: 23.8px; color: var(--gris-texte);
  text-align: left; margin: 0; padding: 0;
}
/* La raison d'être du laboratoire est la première ligne du texte, en gras dans la base :
   on la remonte en bleu nuit et on lui donne 5px d'air. En inline-block plutôt qu'en block,
   pour que le <br> qui la suit dans le contenu stocké ne crée pas de ligne vide : le texte
   de la base reste inchangé au caractère près, et un rédacteur qui le réenregistre depuis
   /admin (liste blanche em/strong/a/br) ne peut pas casser la mise en page. */
body[data-page="living-lab"] .ll-labo-texte strong {
  display: inline-block; margin-bottom: 5px;
  font-weight: 700; color: var(--nuit);
}

/* --- Adaptatif -----------------------------------------------------------------------------
   Entre 768 et 1100px les deux colonnes tiennent encore (colonne de gauche à 172px : les
   noms longs passent sur deux lignes, ce qui est le propre d'un sommaire). Sous 768px une
   colonne de 26 % ne ferait plus que 94px : on empile, le nom servant d'intitulé de ligne.
   MESURÉ à 360px : une seule colonne de 324px, aucun débordement horizontal.             */
@media (max-width: 767px) {
  body[data-page="living-lab"] .ll-labo {
    grid-template-columns: 1fr; column-gap: 0; padding: 18px 0;
  }
  body[data-page="living-lab"] .ll-labo-nom { font-size: 18px; margin-bottom: 8px; }
}

/* --- Bande « Ce que nous souhaitons proposer » ----------------------------------------------- */
body[data-page="living-lab"] .sec--ll-proposer { padding: 0 0 54px; }

/* --- Bande « Projets structurants en cours » --------------------------------------------------
   Fond blanc recouvert du grain du site d’origine (tuile de 100 × 100px, répétée).        */
body[data-page="living-lab"] .sec--ll-projets {
  padding: 54px 0;
  background-color: var(--blanc);
  background-image: url('/assets/img/6xpos-bg-grain.jpg');
  background-repeat: repeat;
}
body[data-page="living-lab"] .ll-photo {
  display: block; width: 100%; height: auto; margin: 0 0 var(--air-module);
}
/* Titre de bande à 53px, centré, « Projets structurants » en mauve gras et « en cours »
   en italique bleu nuit. */
body[data-page="living-lab"] .ll-titre-projets {
  font-size: 53px; line-height: 40px; color: var(--nuit); text-align: center;
  margin: 0 0 var(--air-module); padding-bottom: 10px;
}
body[data-page="living-lab"] .ll-titre-projets strong { font-weight: 700; }

/* --- Bande « Vous êtes… » + « Notre ambition » -------------------------------------------- */
body[data-page="living-lab"] .sec--ll-vous { padding: 0 0 54px; }
body[data-page="living-lab"] .ll-profils { align-items: stretch; }

body[data-page="living-lab"] .ll-profil-img {
  display: block; width: 100%; height: auto; margin: 0 0 13.6406px;
}
body[data-page="living-lab"] .ll-profil-texte { margin-bottom: 13.6406px; }

/* Le conteneur de l’appel à l’action est une boîte souple : sa hauteur est exactement
   celle de la pilule, et celle-ci se replie sur deux lignes quand le libellé est long. */
body[data-page="living-lab"] .ll-profil-action {
  display: flex; justify-content: center; margin: 0;
}
body[data-page="living-lab"] .ll-cta {
  display: inline-block; max-width: 100%;
  padding: 6px 20px; border-radius: 68px;
  background: var(--nuit); color: var(--rose);
  font-size: 20px; line-height: 34px; text-align: center;
}

/* --- Adaptatif ----------------------------------------------------------------------------
   Sur tablette les grilles de 4 et 5 colonnes tombent à 2 et 3, sur téléphone à 1 et 2 ;
   les grands titres sont ramenés à une taille lisible.                                    */
@media (max-width: 1100px) {
  body[data-page="living-lab"] .ll-piliers { grid-template-columns: repeat(2, 1fr); }
  body[data-page="living-lab"] .ll-profils { grid-template-columns: repeat(3, 1fr); }
  body[data-page="living-lab"] .ll-titre { font-size: 42px; line-height: 40px; }
  body[data-page="living-lab"] .ll-titre-projets { font-size: 42px; line-height: 40px; }
  body[data-page="living-lab"] .ll-h2 { font-size: 30px; line-height: 32px; }
  body[data-page="living-lab"] .rangee-ll-cartes { padding-top: 27px; }
}

@media (max-width: 767px) {
  body[data-page="living-lab"] .ll-piliers { grid-template-columns: 1fr; }
  body[data-page="living-lab"] .ll-profils { grid-template-columns: repeat(2, 1fr); }
  body[data-page="living-lab"] .ll-titre { font-size: 32px; line-height: 32px; }
  body[data-page="living-lab"] .ll-titre-projets { font-size: 32px; line-height: 32px; }
  body[data-page="living-lab"] .ll-h2 { font-size: 26px; line-height: 28px; }

  /* Sur deux colonnes étroites, les libellés d’action passent à la ligne : on resserre
     l’interligne de la pilule pour qu’elle ne devienne pas une grosse boîte creuse. */
  body[data-page="living-lab"] .ll-cta { font-size: 18px; line-height: 26px; padding: 8px 16px; }
}

/* Recalage après correction des métriques de fonte du socle (les surcharges
   ascent/descent ne s'appliquent plus qu'à degulardisplay-regular, comme dans le
   thème d'origine). Écarts mesurés bande par bande avec diff-sections.js. */
body[data-page="living-lab"] .sec--ll-labos { padding-bottom: 52px; }
body[data-page="living-lab"] .sec--ll-projets { padding-bottom: 50px; }

/* --- Boucle vertueuse du bandeau (colonne de droite) --------------------------------------
   Remplace le gabarit gris « visuel à fournir » du bandeau. Une carte blanche au gabarit
   des cartes de la page (coins 40px, même ombre que .ll-carte) porte la mention
   « LIVING LAB VIVMED » puis le cycle de la devise, dessiné en CSS pur : un anneau, trois
   pilules en dégradé posées dessus, trois chevrons donnant le sens horaire. Aucune image,
   aucun script : la carte tient hors-ligne et les libellés s'éditent depuis /admin.
   Contrastes calculés : marque et chevrons bleu nuit sur blanc 14,4:1 ; texte des
   stations bleu nuit sur le dégradé 10,6:1 (côté rose) à 6,3:1 (côté mauve) — AA partout. */
body[data-page="living-lab"] .ll-boucle {
  background: var(--blanc);
  border-radius: var(--rayon-carte);
  padding: 26px 22px 24px;
  box-shadow: rgba(0, 0, 0, .3) 0 2px 18px -12px;   /* même ombre que .ll-carte */
  max-width: 380px;
  margin: 0 auto;                  /* centrée dans la demi-colonne, comme l'ancien visuel */
}

/* La mention : « Living Lab » en degular-light, « Vivmed » en gras, capitales posées par
   le CSS (le texte stocké garde sa casse). À 20px le seuil AA est 4,5:1 — on est à 14,4:1. */
body[data-page="living-lab"] .ll-boucle-marque {
  font-family: var(--pile-light);
  font-size: 20px; line-height: 24px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--nuit); text-align: center;
  margin: 0;
}
body[data-page="living-lab"] .ll-boucle-marque strong {
  font-family: var(--pile); font-weight: 700;
}
/* Filet en dégradé sous la mention — décor pur, aucun texte dans le pseudo-élément. */
body[data-page="living-lab"] .ll-boucle-marque::after {
  content: ""; display: block;
  width: 58px; height: 3px; border-radius: 2px;
  margin: 12px auto 0;
  background: var(--degrade);
}

/* Le plateau : un carré qui sert de repère aux positions en pourcentages. Toute la
   géométrie se lit sur un cercle de rayon 36 % du carré, centré. Les stations sont à
   270° (haut), 30° (bas droite) et 150° (bas gauche) ; les chevrons à mi-arc, soit
   330°, 90° et 210°. Conversion : x = 50 + 36·cos(a), y = 50 + 36·sin(a) — d'où les
   81,2 %, 68 %, 18,8 %… ci-dessous.                                                     */
body[data-page="living-lab"] .ll-boucle-cycle {
  position: relative;
  aspect-ratio: 1;
  max-width: 300px;
  margin: 24px auto 0;
}
/* Repli pour les navigateurs sans aspect-ratio (avant Safari 15). Tous les enfants du
   plateau sont en position absolue : sans hauteur propre, le cycle ne se déforme pas, il
   DISPARAIT. Une cale au ratio 1:1 tient le carré. La règle ne s'applique nulle part
   ailleurs, donc elle ne coûte rien là où aspect-ratio est compris. */
@supports not (aspect-ratio: 1 / 1) {
  body[data-page="living-lab"] .ll-boucle-cycle::after {
    content: ""; display: block; padding-top: 100%;
  }
}
/* L'anneau : cercle de 2px, inséré de 14 % pour que son rayon fasse 36 % — les pilules,
   centrées sur les mêmes coordonnées, chevauchent donc l'anneau.
   Tracé en bleu nuit et non en mauve : sur la carte blanche, le mauve plafonne à 2,3:1,
   sous le seuil de 3:1 que WCAG 1.4.11 exige d'un élément graphique porteur de sens.
   Le nuit le porte à 13,2:1, et rejoint la couleur des chevrons du même dessin. */
body[data-page="living-lab"] .ll-boucle-cycle::before {
  content: ""; position: absolute; inset: 14%;
  border: 2px solid var(--nuit);
  border-radius: 50%;
}

/* Les stations : pilules au dégradé de la charte, texte bleu nuit. nowrap : un libellé
   de station tient sur une ligne — garder un ou deux mots courts. */
body[data-page="living-lab"] .ll-boucle-station {
  position: absolute; transform: translate(-50%, -50%);
  white-space: nowrap;
  background: var(--degrade);
  color: var(--nuit);
  border-radius: var(--rayon-pilule);
  padding: 7px 16px;
  font-size: 15px; line-height: 18px;
  margin: 0;
}
body[data-page="living-lab"] .ll-boucle-station--soins         { left: 50%;   top: 14%; }
body[data-page="living-lab"] .ll-boucle-station--donnees       { left: 81.2%; top: 68%; }
body[data-page="living-lab"] .ll-boucle-station--connaissances { left: 18.8%; top: 68%; }

/* Les chevrons : un petit carré dont on ne trace que les bords haut et droit, tourné pour
   pointer dans le sens de la marche. Le coin non tourné pointe à -45° (haut-droite) :
   rotation = angle de la tangente horaire + 45°. Orientations vérifiées au navigateur
   (écart mesuré ≤ 0,4° sur les trois). */
body[data-page="living-lab"] .ll-boucle-fleche {
  position: absolute; width: 12px; height: 12px;
  border-top: 2px solid var(--nuit);
  border-right: 2px solid var(--nuit);
}
/* soins → données : haut droite du cercle (330°), pointe vers le bas-droite (60° + 45°). */
body[data-page="living-lab"] .ll-boucle-fleche--1 {
  left: 81.2%; top: 32%;
  transform: translate(-50%, -50%) rotate(105deg);
}
/* données → connaissances : bas du cercle (90°), pointe vers la gauche (180° + 45°). */
body[data-page="living-lab"] .ll-boucle-fleche--2 {
  left: 50%; top: 86%;
  transform: translate(-50%, -50%) rotate(225deg);
}
/* connaissances → soins : haut gauche (210°), pointe vers le haut-droite (-60° + 45°) —
   c'est le chevron qui referme la boucle. */
body[data-page="living-lab"] .ll-boucle-fleche--3 {
  left: 18.8%; top: 32%;
  transform: translate(-50%, -50%) rotate(-15deg);
}

/* --- Adaptatif : sous 768px le socle replie déjà .cols--2 en une seule colonne ; la
   carte prend alors la largeur de la rangée. On resserre le plateau et les pilules pour
   garder de la marge sur un écran de 360px (mesuré : « Connaissances » conserve 9px de
   marge dans une colonne de 317px, avant même ces réductions). */
@media (max-width: 767px) {
  body[data-page="living-lab"] .ll-boucle { padding: 22px 16px 20px; }
  body[data-page="living-lab"] .ll-boucle-marque { font-size: 18px; line-height: 22px; }
  body[data-page="living-lab"] .ll-boucle-cycle { max-width: 272px; margin-top: 20px; }
  body[data-page="living-lab"] .ll-boucle-station { font-size: 14px; padding: 6px 13px; }
}