/* =========================================================================
   CRA FORMATION - feuille du site
   -------------------------------------------------------------------------
   1. CHARTE        polices, variables, typographie de base, tc1, tc2,
                    surtitre, readmore, liens des champs HTML
   2. SOCLE         repris tel quel de socle_structurel (ListePresentations-v2)
   2 bis. STRUCTURE StyleHTML des présentations, repris tel quel
   3. ENTETE / PIED rowH, menu (megamenuv4), rowF1, rowF2
   4. DECLINAISONS  hero, section ; autres styles fondnuit, espacebas
   5. MEDIA QUERIES 943px (menu mobile, megamenuv4) puis 767px
   Valeurs relevées sur le rendu de la maquette à 1440px et 390px.
   ========================================================================= */


/* =========================================================================
   1. CHARTE
   ========================================================================= */

/* Polices auto-hébergées dans /font/ (latin + latin étendu, licence OFL).
   Roboto est une police variable : une seule fonte pour 400 à 700. */
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 200; font-display: swap; src: url('/font/poppins-extralight.woff') format('woff');}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('/font/poppins-light.woff') format('woff');}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/font/poppins-regular.woff') format('woff');}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/font/poppins-medium.woff') format('woff');}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/font/poppins-semibold.woff') format('woff');}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/font/poppins-bold.woff') format('woff');}
@font-face {font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('/font/poppins-italic.woff') format('woff');}
@font-face {font-family: 'Poppins'; font-style: italic; font-weight: 600; font-display: swap; src: url('/font/poppins-semibolditalic.woff') format('woff');}
@font-face {font-family: 'Roboto';  font-style: normal; font-weight: 400 700; font-display: swap; src: url('/font/roboto-var.woff') format('woff');}

:root {
  /* couleurs */
  --nuit: #1E1D40;          /* titres, fond de section, sous-menus, bandeau bas */
  --nuit-clair: #373566;    /* survol des sous-menus */
  --vert: #0DF19B;          /* filets, bouton, survol du menu */
  --bleu: #362EF2;          /* boutons secondaires (page financement) */
  --texte: #7A7A7A;         /* texte courant */
  --encre: #1E1E2A;         /* textes du pied */
  --lien: #2B6CB0;          /* liens dans les champs HTML */
  --lien-survol: #215387;
  --blanc-casse: #F7FAFC;   /* liens des sous-menus */
  --fond-pied: #ECECEC;
  --rouge: #FF0000;
  --lavande: #E7E6F2;       /* fonds des volets dépliés et des tableaux */
  /* polices */
  --police-titre: 'Poppins', sans-serif;
  --police-texte: 'Roboto', sans-serif;
  /* mise en page */
  --largeur-contenu: 1120px;
  --gouttiere: 10px;        /* marge latérale des contenus de chaque côté */
  --pad-section-haut: 40px;
  --pad-section-bas: 20px;
  --hauteur-entete: 125px;
}

html {-webkit-text-size-adjust: 100%; scroll-behavior: smooth;}
body {margin: 0; background: #fff; color: var(--texte); font-family: var(--police-texte); font-size: 17px; line-height: 1.6;}
*, *::before, *::after {box-sizing: border-box;}

/* titre principal d'un contenu : le look ne dépend pas de la balise */
.tc1 {margin: 0; font-family: var(--police-texte); font-size: 28px; font-weight: 600; line-height: 1; letter-spacing: normal; text-transform: none; color: var(--nuit);}
/* titre de colonne / sous-titre */
.tc2 {margin: 0 0 12px; font-family: var(--police-texte); font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: normal; text-transform: none; color: var(--nuit);}
/* surtitre (TEXTE05) - absent de la maquette, déduit de la charte */
.surtitre {margin: 0 0 10px; font-family: var(--police-titre); font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 2px; text-transform: uppercase; color: var(--vert);}
/* lien « lire la suite » : même dessin que le bouton de l'entête */
/* align-self : dans une présentation 5 (flex column, stretch) un lien posé en
   enfant direct serait étiré sur toute la largeur ; sans effet ailleurs */
.pres a.readmore {display: inline-block; align-self: flex-start; margin-top: 20px; padding: 6px 24px; border-radius: 15px; background: var(--vert); color: var(--nuit); font-family: var(--police-titre); font-size: 16px; font-weight: 400; line-height: 1.6; text-decoration: none; transition: background-color .3s, color .3s;}
.pres a.readmore:hover {background: var(--nuit); color: #fff;}

/* texte des champs HTML */
.pres .txt {font-family: var(--police-texte); font-size: 17px; font-weight: 400; line-height: 1.6; color: var(--texte);}
.pres .txt p, .pres .pied p {margin: 0 0 32px;}
.pres .txt ul, .pres .txt ol, .pres .pied ul, .pres .pied ol {margin: 0 0 32px; padding-left: 34px;}
.pres .txt li, .pres .pied li {margin: 0;}
.pres .txt > :last-child, .pres .pied > :last-child {margin-bottom: 0;}
.pres .txt strong, .pres .txt b {font-weight: 700;}
/* liens posés dans les champs HTML (maillage interne) : portée limitée aux
   paragraphes et listes, pour que les liens structurels (readmore, lienbloc,
   boutons des colonnes) gardent leur propre habillage */
.pres .txt p a, .pres .txt li a, .pres .chapeau p a {color: var(--lien); text-decoration: none; transition: color .3s;}
.pres .txt p a:hover, .pres .txt li a:hover, .pres .chapeau p a:hover {color: var(--lien-survol);}


/* =========================================================================
   2. SOCLE (socle_structurel - ne pas modifier)
   ========================================================================= */
#zt {width: 100%; overflow-x: hidden;}
#ZC {width: 100%;}
#content {display: block; width: 100%;}
header {position: fixed; top: 0; left: 0; right: 0; z-index: 100;}
.rowH, .rowF1, .rowF2, .rowgroupe {width: 100%;}
.row {width: 100%;}
.containerA {width: min(1180px, calc(100% - 40px)); margin: 0 auto;}
.pres {width: 100%;}
.pres .col, .pres .intcol {min-width: 0;}
.pres .box-img {margin: 0;}
.pres .box-img picture {display: block;}
.pres .box-img img {display: block; max-width: 100%;}
.pres .titres, .pres .chapeau, .pres .txt, .pres .pied {display: block;}
.pres .surtitre {display: block;}
.pres a.lienbloc, .pres a[data-lightbox] {color: inherit; text-decoration: none;}
.pres a[data-lightbox] {display: block;}

/* =========================================================================
   2 bis. STRUCTURE DES PRESENTATIONS (couche 2 de l'instruction CSS)
   StyleHTML de Liste_PresentationsV2, repris TEL QUEL : flex uniquement,
   ni couleur ni typographie. Le moteur ne l'injecte pas dans la page :
   sans ce bloc, les colonnes s'empilent.
   ========================================================================= */
/* 1 - Image petite a gauche */
.pres1 {display: flex; flex-direction: row; align-items: flex-start; width: 100%;}
.pres1 > .colimage {flex: 0 0 auto; min-width: 0;}
.pres1 > .coltexte {flex: 1 1 0; min-width: 0;}
/* 2 - Image petite a droite */
.pres2 {display: flex; flex-direction: row-reverse; align-items: flex-start; width: 100%;}
.pres2 > .colimage {flex: 0 0 auto; min-width: 0;}
.pres2 > .coltexte {flex: 1 1 0; min-width: 0;}
/* 3 - Image grande a gauche */
.pres3 {display: flex; flex-direction: row; align-items: flex-start; width: 100%;}
.pres3 > .colimage {flex: 1 1 0; min-width: 0;}
.pres3 > .coltexte {flex: 1 1 0; min-width: 0;}
/* 4 - Image grande a droite */
.pres4 {display: flex; flex-direction: row-reverse; align-items: flex-start; width: 100%;}
.pres4 > .colimage {flex: 1 1 0; min-width: 0;}
.pres4 > .coltexte {flex: 1 1 0; min-width: 0;}
/* 5 - Texte pleine largeur */
.pres5 {display: flex; flex-direction: column; align-items: stretch; width: 100%;}
.pres5 > .titres, .pres5 > .txt {min-width: 0;}
/* 15 - 2 images et textes relies */
.pres15 {display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; width: 100%;}
.pres15 > .chapeau, .pres15 > .pied {flex: 0 0 100%; min-width: 0;}
.pres15 > .col {display: flex; flex: 1 1 0; min-width: 0;}
.pres15 > .col > .intcol {display: flex; flex-direction: column; width: 100%;}
/* 18 - 4 images et textes */
.pres18 {display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; width: 100%;}
.pres18 > .chapeau, .pres18 > .pied {flex: 0 0 100%; min-width: 0;}
.pres18 > .col {display: flex; flex: 1 1 0; min-width: 0;}
.pres18 > .col > .intcol {display: flex; flex-direction: column; width: 100%;}
/* 19 - 3 images et textes relies */
.pres19 {display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; width: 100%;}
.pres19 > .chapeau, .pres19 > .pied {flex: 0 0 100%; min-width: 0;}
.pres19 > .col {display: flex; flex: 1 1 0; min-width: 0;}
.pres19 > .col > .intcol {display: flex; flex-direction: column; width: 100%;}
/* 32 - 5 images et textes */
.pres32 {display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; width: 100%;}
.pres32 > .chapeau, .pres32 > .pied {flex: 0 0 100%; min-width: 0;}
.pres32 > .col {display: flex; flex: 1 1 0; min-width: 0;}
.pres32 > .col > .intcol {display: flex; flex-direction: column; width: 100%;}
/* 34 - 6 images et textes */
.pres34 {display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; width: 100%;}
.pres34 > .chapeau, .pres34 > .pied {flex: 0 0 100%; min-width: 0;}
.pres34 > .col {display: flex; flex: 1 1 0; min-width: 0;}
.pres34 > .col > .intcol {display: flex; flex-direction: column; width: 100%;}
/* 100 - N colonnes depuis PA_IMAGES */
.pres100 {display: flex; flex-direction: column; align-items: stretch; width: 100%;}
.pres100 > .chapeau, .pres100 > .pied {width: 100%; min-width: 0;}
.pres100 > .grille {display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; width: 100%;}
.pres100 .col {display: flex; flex: 1 1 0; min-width: 0;}
.pres100 .col > .intcol {display: flex; flex-direction: column; width: 100%;}


/* =========================================================================
   3. ENTETE ET PIED
   ========================================================================= */

/* ---- réserve de l'entête fixe ---------------------------------------- */
#ZC {padding-top: var(--hauteur-entete);}
.row[id] {scroll-margin-top: var(--hauteur-entete-reelle, var(--hauteur-entete));}

/* ---- rowH -------------------------------------------------------------- */
.rowH {height: var(--hauteur-entete); background: #fff;}
/* pleine largeur, 100px de chaque côté ; c1 et c3 se partagent la place
   restante à parts égales, ce qui centre le menu dans la page tant que le
   logo et le bouton le permettent (comme la maquette) */
.rowH > .containerA {display: flex; align-items: center; width: auto; height: 100%; margin: 0 100px;}
.rowH .c1 {flex: 1 1 0; min-width: max-content; padding-right: 10px;}
.rowH .c1 a {display: block;}
.rowH .c1 img {display: block; width: 180px; height: auto;}
.rowH .c2 {flex: 0 1 auto; display: flex; justify-content: center; min-width: 0;}
.rowH .c3 {flex: 1 1 0; min-width: max-content; display: flex; justify-content: flex-end; padding-left: 18px;}
.rowH .c3 a.btnentete {display: inline-block; padding: 6px 24px; border-radius: 15px; background: var(--vert); color: var(--nuit); font-family: var(--police-titre); font-size: 16px; font-weight: 400; line-height: 1.6; text-decoration: none; transition: background-color .3s, color .3s;}
.rowH .c3 a.btnentete:hover {background: var(--nuit); color: #fff;}

/* ---- menu : markup imposé, classes posées par megamenuv4.js -------------
   menu-dropdown-icon, normal-sub, a.menu-mobile(.actif), span.ouvre,
   ul.show-on-mobile, li.mFlip. v4 ne pose AUCUN style inline : l'ouverture
   d'un panneau en mobile est portée par li.mFlip, ici.                     */
.menu-container .clear {display: none;}
.menu a.menu-mobile {display: none;}
.menu span.ouvre {display: none;}
/* le menu passe sur deux lignes entre 944 et ~1420px, comme la maquette */
.menu > ul {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0; padding: 0; list-style: none;}
.menu > ul > li {position: relative; margin: 0; padding: 0;}
.menu > ul > li > span {display: block;}
.menu > ul > li > span > a {display: flex; align-items: center; height: 45px; padding: 0 17.92px; font-family: var(--police-titre); font-size: 16px; font-weight: 500; line-height: 1.6; text-transform: uppercase; color: var(--nuit); text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .3s;}
.menu > ul > li > span > a:hover {color: var(--vert);}
/* chevron des rubriques à panneau (classe posée par megamenuv4.js) */
.menu > ul > li.menu-dropdown-icon > span > a::after {content: ""; flex: 0 0 13px; width: 13px; height: 13px; margin-left: 3px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;}
/* « S'inscrire » : dernière rubrique, réservée au menu mobile (remplace le bouton c3) */
.menu > ul > li.last {display: none;}

/* panneau de sous-rubriques : ouverture au survol en CSS */
.menu > ul > li > ul {display: none; position: absolute; top: 100%; left: 0; z-index: 10; margin: 0; padding: 0; list-style: none; background: var(--nuit); box-shadow: 0 2px 13px rgba(0, 0, 0, .1);}
.menu > ul > li:hover > ul {display: flex;}
.menu li.col {width: 253px; margin: 0; padding: 0; list-style: none;}
.menu li.col + li.col {border-left: 1px solid rgba(255, 255, 255, .1);}
.menu li.col > ul {margin: 0; padding: 0; list-style: none;}
.menu li.col li {margin: 0; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .1);}
.menu li.col li:last-child {border-bottom: 0;}
.menu li.col a {display: block; padding: 17.92px 14px; font-family: var(--police-titre); font-size: 14px; font-weight: 400; line-height: 1.6; text-transform: uppercase; color: var(--blanc-casse); text-decoration: none; transition: color .3s, background-color .3s;}
.menu li.col a:hover {color: var(--vert); background: var(--nuit-clair);}
/* 3e niveau : liste imbriquée */
.menu li.col li ul {margin: 0; padding: 0 0 8px; list-style: none;}
.menu li.col li li {border: 0;}
.menu li.col li li a {padding: 8px 14px 8px 28px; font-size: 13px; text-transform: none;}

/* ---- pied : rowF1 ------------------------------------------------------ */
.rowF1 {padding: 60px 0; background: var(--fond-pied); color: var(--encre); font-family: var(--police-titre);}
.rowF1 > .containerA {display: flex; width: min(1140px, calc(100% - 20px));}
.rowF1 .footc {flex: 1 1 50%; min-width: 0;}
.rowF1 .footc1 {padding-left: 100px;}
.rowF1 .footc2 {padding-left: 95px;}
.rowF1 a {color: inherit; text-decoration: none;}
.rowF1 ul {margin: 0; padding: 0; list-style: none;}
.rowF1 .titrepied {margin: 0; font-family: var(--police-titre); font-size: 17px; font-weight: 600; line-height: 1; letter-spacing: 4px; text-transform: uppercase; color: var(--encre);}
/* colonne 1 : coordonnées, Qualiopi */
.rowF1 .coordpied {margin-top: 24px;}
.rowF1 .coordpied p {margin: 0; font-size: 14px; font-weight: 200; line-height: 34px;}
.rowF1 .coordpied a {color: #000;}
.rowF1 .coordpied .telpied a {text-decoration: underline;}
.rowF1 .coordpied .mailpied {display: none;}
.rowF1 .qualipied {display: block; width: 163px; margin-top: 3px;}
.rowF1 .qualipied img {display: block; width: 100%; height: auto;}
.rowF1 .mentionpied {width: 270px; margin: 9px 0 0; font-size: 9px; line-height: 1.6; color: #000;}
.rowF1 .actionpied {margin: 13px 0 0; font-size: 9px; font-weight: 700; line-height: 1.6; color: var(--rouge);}
/* colonne 2 : menu du pied, réseaux */
/* titres, liens et réseaux alignés sur le même bord gauche */
.rowF1 .footc2 .titrepied2 {margin-top: 35px;}
.rowF1 .menupied {display: grid; grid-template-columns: 220px 1fr; margin-top: 20px;}
.rowF1 .menupied a {display: block; padding: 7px 0; font-size: 14px; font-weight: 200; line-height: 1; transition: color .3s;}
.rowF1 .menupied a:hover {color: var(--nuit);}
.rowF1 .reseaux {display: grid; grid-template-columns: 220px 1fr; margin-top: 24px;}
.rowF1 .reseaux a {display: inline-flex; align-items: center; font-size: 14px; font-weight: 200; line-height: 22px;}
.rowF1 .reseaux svg {display: block; width: 21px; height: 21px; margin-right: 5px; fill: currentColor;}
/* ---- pied : rowF2 ------------------------------------------------------ */
.rowF2 {padding: 24px 0; background: var(--nuit); color: #fff; font-family: var(--police-titre);}
.rowF2 > .containerA {width: min(1120px, calc(100% - 20px));}
.rowF2 .footc1 {margin: 0; font-size: 14px; font-weight: 300; line-height: 1.6; text-align: center;}
.rowF2 a {color: #fff; text-decoration: underline;}
.rowF2 a.sansdeco {text-decoration: none;}


/* =========================================================================
   4. DECLINAISONS
   ========================================================================= */

/* largeur des contenus de la charte : 1120px, gouttière de 10px */
.containerhero, .containersection {width: min(var(--largeur-contenu), calc(100% - 2 * var(--gouttiere)));}

/* ---- hero : présentation 3, titre centré sur photo en parallaxe --------
   La photo est saisie dans IMAGE01 mais affichée ici en fond fixe
   (parallaxe) : la figure rendue par le template est masquée.
   Si IMAGE01 change en back-office, mettre à jour l'URL ci-dessous
   (évolution prévue : réécriture automatique du CSS).                     */
.rowhero {position: relative; background: url('/lib/picts/pages1/pexels-andrea-piacquadio-3860931-1-scaled.jpg') 0 -107px / cover no-repeat fixed;}
.rowhero::before {content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .73);}
.rowhero > .containerhero {position: relative; z-index: 1;}
.pres3hero {min-height: 329px; padding: 79px 0 40px; align-items: flex-start;}
.pres3hero > .colimage {display: none;}
.pres3hero > .coltexte {flex: 1 1 auto;}
.rowhero .titres {text-align: center;}
.rowhero .tc1 {font-family: var(--police-titre); font-size: 46px; font-weight: 600; line-height: 1; text-transform: uppercase; color: var(--nuit);}
.pres3hero .txt {margin-top: 20px; text-align: center;}

/* ---- section : titre, filet vert, texte -------------------------------- */
.rowsection {padding: var(--pad-section-haut) 0 var(--pad-section-bas);}
.pres5section > .titres::after {content: ""; display: block; width: 28%; height: 5px; margin-top: 19px; background: var(--vert);}
.pres5section > .txt {margin-top: 22px;}
.pres5section > a.readmore {align-self: flex-start;}

/* ---- hero en présentation 15 : titre dans le chapeau, un bouton par
   colonne (colonnes réduites à un lien). IMAGE01 est saisie pour le
   back-office, la photo est affichée par l'autre style photo* de la row.
   Les propriétés déjà posées par le StyleHTML sont surchargées avec
   .pres15.pres15hero pour ne pas dépendre de l'ordre des feuilles.      */
.pres15.pres15hero {min-height: calc(58vh + 40px); padding-bottom: 54px; align-content: center; justify-content: center; column-gap: 20px; row-gap: 10px;}
.pres15hero > .chapeau {margin-bottom: 33px;}
.pres15hero .box-img {display: none;}
.pres15.pres15hero > .col {flex: 0 0 auto;}
.pres15hero .txt a.readmore {display: block; width: 338px; margin: 0; padding: 15px 10px; border-radius: 3px; background: var(--bleu); color: #fff; font-family: var(--police-titre); font-size: 15px; font-weight: 500; line-height: 17px; text-align: center; text-decoration: none; transition: background-color .3s, color .3s;}
.pres15hero .txt a.readmore:hover {background: #fff; color: var(--bleu);}
.pres15hero .col2 .txt a.readmore {width: 318px; background: var(--vert); color: #fff;}
.pres15hero .col2 .txt a.readmore:hover {background: #fff; color: var(--nuit);}

/* ---- logotexte : présentation 15, logo + mentions | titre H1 + texte --- */
.rowlogotexte {padding: 46px 0 45px;}
.containerlogotexte {width: min(1043px, 100%);}
.pres15.pres15logotexte {align-items: flex-start;}
.pres15.pres15logotexte > .col1 {flex: 0 0 302px; padding: 27px 20px 0;}
.pres15.pres15logotexte > .col2 {flex: 1 1 0; padding: 20px 0 0 20px;}
.pres15logotexte .col1 .box-img img {width: 262px; height: auto; border: 1px solid var(--lien);}
.pres15logotexte .col1 .txt {margin-right: -10px; padding-left: 10px; font-family: var(--police-titre); font-size: 9px; line-height: 1.6; color: #000;}
.pres15logotexte .col1 .txt p {margin: 0;}
.pres15logotexte .col1 .txt p.action {margin-top: 6px; font-weight: 700; color: var(--rouge);}
.pres15logotexte .tc2 {margin: 0 0 36px; font-family: var(--police-titre); font-size: 32px; font-weight: 600; line-height: 35px; color: var(--nuit); text-align: left;}
.pres15logotexte .col2 .txt {font-family: var(--police-titre); font-size: 14px; line-height: 1.6; color: var(--nuit); text-align: justify;}

/* ---- moitie : présentations 3 et 4, photo sur une moitié, texte -------- */
.containermoitie {width: min(1140px, 100%);}
.pres3.pres3moitie, .pres4.pres4moitie {align-items: stretch;}
.pres3.pres3moitie > .col, .pres4.pres4moitie > .col {flex: 0 0 50%;}
.pres3moitie > .colimage, .pres4moitie > .colimage {position: relative;}
.pres3moitie > .colimage .box-img, .pres4moitie > .colimage .box-img {position: absolute; inset: 0;}
.pres3moitie > .colimage picture, .pres4moitie > .colimage picture {height: 100%;}
.pres3moitie > .colimage img, .pres4moitie > .colimage img {width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 0 0;}
.pres3moitie > .coltexte {padding: 80px 30px 80px 60px;}
.pres4moitie > .coltexte {padding: 80px 60px 80px 30px;}
.pres3moitie .tc1, .pres4moitie .tc1 {font-family: var(--police-titre); font-size: 22px; font-weight: 600; line-height: 25px; color: var(--nuit);}
.pres3moitie .titres::after, .pres4moitie .titres::after {content: ""; display: block; width: 58%; height: 3px; margin-top: 16px; background: var(--vert);}
.pres3moitie > .coltexte > .txt, .pres4moitie > .coltexte > .txt {margin-top: 22px; font-family: var(--police-titre); font-size: 14px; line-height: 1.6; color: #000; text-align: justify;}
/* « N'hésitez pas… » : paragraphe de relance, vert italique, plus proche du texte */
.pres3moitie .txt p:has(+ p.relance), .pres4moitie .txt p:has(+ p.relance) {margin-bottom: 20px;}
.pres3moitie .txt p.relance em, .pres4moitie .txt p.relance em {font-style: italic; color: var(--vert);}
.pres3moitie > .coltexte > a.readmore, .pres4moitie > .coltexte > a.readmore {display: inline-block; margin-top: 20px; padding: 13px 25px 10px 20px; border-radius: 3px; background: var(--bleu); color: #fff; font-family: var(--police-titre); font-size: 13px; font-weight: 400; line-height: 13px; text-decoration: none; transition: background-color .3s, color .3s;}
.pres3moitie > .coltexte > a.readmore:hover, .pres4moitie > .coltexte > a.readmore:hover {background: #fff; color: var(--bleu);}

/* ---- cartes : présentations 18 (grille 2 x 2), 15 (2 cartes par contenu,
   un contenu de plus = une ligne de cartes de plus) et 19 (3 colonnes)    */
.rowcartes {padding: 67px 0 120px;}
.containercartes {width: min(980px, calc(100% - 40px));}
.pres18.pres18cartes, .pres15.pres15cartes, .pres19.pres19cartes {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px;}
.pres18cartes > .chapeau, .pres15cartes > .chapeau, .pres19cartes > .chapeau {grid-column: 1 / -1; margin-bottom: 42px;}
.pres18cartes > .chapeau .tc1, .pres15cartes > .chapeau .tc1, .pres19cartes > .chapeau .tc1 {font-family: var(--police-titre); font-size: 44px; font-weight: 600; line-height: 44px; text-transform: uppercase; text-align: center; color: var(--nuit);}
.pres18cartes > .col > .intcol, .pres15cartes > .col > .intcol, .pres19cartes > .col > .intcol {padding: 40px; border-radius: 8px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .13);}
.pres18cartes .intcol > .txt, .pres15cartes .intcol > .txt, .pres19cartes .intcol > .txt {display: flex; flex-direction: column; flex: 1 1 auto; font-family: var(--police-titre); font-size: 14px; font-weight: 200; line-height: 1.6; color: var(--nuit); text-align: justify;}
.pres18cartes .tc2, .pres15cartes .tc2, .pres19cartes .tc2 {margin: 0 0 35px; font-family: var(--police-titre); font-size: 25px; font-weight: 600; line-height: 34px; text-transform: uppercase; text-align: center; color: var(--nuit);}
.pres18cartes .tc2::after, .pres15cartes .tc2::after, .pres19cartes .tc2::after {content: ""; display: block; width: 72%; height: 5px; margin: 10px auto 0; background: var(--vert);}
.pres18cartes .txt p, .pres15cartes .txt p, .pres19cartes .txt p {margin: 0 0 20px;}
.pres18cartes .txt strong, .pres15cartes .txt strong, .pres19cartes .txt strong, .pres18cartes .txt b, .pres15cartes .txt b, .pres19cartes .txt b {font-weight: 400;}
.pres18cartes .txt .mentioncarte, .pres15cartes .txt .mentioncarte, .pres19cartes .txt .mentioncarte {margin: 0 0 20px; font-family: var(--police-titre); font-size: 20px; font-weight: 700; line-height: 30px; color: #2D3748; text-align: center;}
/* lignes durée / sessions : pictogrammes posés en CSS (PATH_PICTS_CSS) */
.pres18cartes .txt ul.infos, .pres15cartes .txt ul.infos, .pres19cartes .txt ul.infos {margin: 0 0 33px; padding: 0; list-style: none;}
.pres18cartes .txt ul.infos li, .pres15cartes .txt ul.infos li, .pres19cartes .txt ul.infos li {position: relative; margin: 0 0 20px; padding-left: 43px; font-weight: 500; text-align: left;}
.pres18cartes .txt ul.infos li:last-child, .pres15cartes .txt ul.infos li:last-child, .pres19cartes .txt ul.infos li:last-child {margin-bottom: 0;}
.pres18cartes .txt ul.infos li::before, .pres15cartes .txt ul.infos li::before, .pres19cartes .txt ul.infos li::before {content: ""; position: absolute; left: 0; top: 0; width: 29px; height: 29px; background: url('/lib/picts/css/temps.png') center / contain no-repeat;}
.pres18cartes .txt ul.infos li.sessions::before, .pres15cartes .txt ul.infos li.sessions::before, .pres19cartes .txt ul.infos li.sessions::before {top: -4px; width: 26px; height: 26px; background-image: url('/lib/picts/css/calendrier.png');}
/* boutons : « Découvrir la formation » (lien de la colonne) puis, s'il existe,
   le bouton secondaire posé dans le champ HTML (p.boutoncarte), remis
   APRES le lien par order ; le premier bouton est poussé en bas de carte */
.pres18cartes .txt > a.readmore, .pres15cartes .txt > a.readmore, .pres19cartes .txt > a.readmore {order: 1; align-self: center; margin-top: auto;}
.pres18cartes .txt > p.boutoncarte, .pres15cartes .txt > p.boutoncarte, .pres19cartes .txt > p.boutoncarte {order: 2; align-self: center; margin: 20px 0 0;}
.pres18cartes .txt > a.readmore, .pres15cartes .txt > a.readmore, .pres19cartes .txt > a.readmore, .pres18cartes .txt > p.boutoncarte a, .pres15cartes .txt > p.boutoncarte a, .pres19cartes .txt > p.boutoncarte a {display: inline-block; padding: 16px 20px; border-radius: 2px; background: var(--nuit); color: #fff; font-family: var(--police-titre); font-size: 15px; font-weight: 500; line-height: 15px; text-transform: uppercase; text-align: center; text-decoration: none; transition: background-color .3s, color .3s;}
.pres18cartes .txt > a.readmore:hover, .pres15cartes .txt > a.readmore:hover, .pres19cartes .txt > a.readmore:hover, .pres18cartes .txt > p.boutoncarte a:hover, .pres15cartes .txt > p.boutoncarte a:hover, .pres19cartes .txt > p.boutoncarte a:hover {background: var(--vert); color: var(--nuit);}

/* contenus « cartes » qui se suivent : une seule section, 40px entre
   les lignes de cartes (même écart qu'entre deux cartes)                */
.rowcartes:has(+ .rowcartes) {padding-bottom: 0;}
.rowcartes + .rowcartes {padding-top: 40px;}
/* présentation 19 : 3 cartes pleine largeur (1400px), titre plus petit */
.rowC19.rowcartes {padding: 50px 0 20px;}
.containerC19.containercartes {width: min(1400px, calc(100% - 40px));}
.pres19.pres19cartes {grid-template-columns: repeat(3, minmax(0, 1fr));}
.pres19cartes .tc2 {font-size: 20px; line-height: 34px;}
.pres19cartes .tc2::after {margin-top: 8px;}
/* étiquette posée dans le champ HTML (p.badge), remontée avant le titre */
.pres18cartes .txt > p.badge, .pres19cartes .txt > p.badge {order: -1; align-self: flex-start; margin: 0 0 20px; padding: 7px; border-radius: 2px; background: var(--vert); color: var(--nuit); font-family: var(--police-titre); font-size: 11px; font-weight: 500; line-height: 11px; text-transform: lowercase;}
.pres18cartes .txt > p.badge.enligne, .pres19cartes .txt > p.badge.enligne {background: var(--nuit); color: #fff;}

/* ---- heroaccueil : présentation 3, H1 + sous-titre + 2 boutons à gauche,
   photo en parallaxe voilée à 66 % (IMAGE01 masquée, image par photo*)   */
.rowheroaccueil {position: relative; background: url('/lib/picts/pages1/pexels-kampus-production-8428054-1-scaled.jpg') -256px 0 / cover no-repeat fixed;}
.rowheroaccueil::before {content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .66);}
.rowheroaccueil > .containerheroaccueil {position: relative; z-index: 1; width: min(1100px, calc(100% - 40px));}
.pres3.pres3heroaccueil {min-height: 85vh; padding: 130px 0 60px; align-items: flex-start;}
.pres3heroaccueil > .colimage {display: none;}
.pres3.pres3heroaccueil > .coltexte {flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 26px;}
.pres3heroaccueil .titres {flex: 0 0 100%; margin-bottom: 32px;}
.pres3heroaccueil .tc1 {margin: 0; font-family: var(--police-titre); font-size: 60px; font-weight: 600; line-height: 60px; letter-spacing: .4px; text-transform: uppercase; color: var(--nuit);}
.pres3heroaccueil .tc2 {margin: 30px 0 0; font-family: var(--police-texte); font-size: 24px; font-weight: 600; line-height: 24px; color: #1A202C;}
.pres3heroaccueil > .coltexte > .txt {display: contents;}
.pres3heroaccueil > .coltexte > a.readmore {order: 1; display: inline-block; margin: 0 0 0 4px; padding: 16px 20px; border-radius: 2px; background: var(--nuit); color: #fff; font-family: var(--police-titre); font-size: 15px; font-weight: 500; line-height: 15px; text-transform: uppercase; text-decoration: none; transition: background-color .3s, color .3s;}
.pres3heroaccueil > .coltexte > a.readmore:hover {background: #fff; color: var(--nuit);}
.pres3heroaccueil .txt > p.bouton {order: 2; margin: 0;}
.pres3heroaccueil .txt > p.bouton a {display: inline-block; padding: 16px 36px; border-radius: 2px; background: var(--vert); color: var(--nuit); font-family: var(--police-titre); font-size: 15px; font-weight: 500; line-height: 15px; text-transform: uppercase; text-decoration: none; transition: background-color .3s, color .3s;}
.pres3heroaccueil .txt > p.bouton a:hover {background: #fff; color: var(--nuit);}

/* ---- chiffres : présentation 18, 4 cartes de chiffres clés (compteurs.js),
   qui chevauchent le bloc précédent (marge négative assumée)               */
.rowchiffres {position: relative; z-index: 2; margin-top: -143px; padding-bottom: 90px;}
.containerchiffres {width: min(1140px, calc(100% - 40px));}
.pres18.pres18chiffres {column-gap: 0;}
.pres18chiffres > .col {padding: 0 7.5px;}
.pres18chiffres > .col > .intcol {box-sizing: border-box; min-height: 203px; padding: 30px 10px 20px; border-radius: 15px; background: #fff; color: #0DB878; box-shadow: 0 0 10px rgba(0, 0, 0, .5); text-align: center;}
.pres18chiffres > .col2 > .intcol {background: var(--nuit); color: #fff; box-shadow: 6px 4px 10px rgba(0, 0, 0, .5);}
.pres18chiffres > .col3 > .intcol {background: var(--vert); color: var(--nuit); box-shadow: 6px 4px 10px rgba(0, 0, 0, .5);}
.pres18chiffres .tc2 {margin: 0 0 20px; font-family: var(--police-titre); font-size: 69px; font-weight: 600; line-height: 69px; color: inherit; text-align: center;}
.pres18chiffres .txt {font-family: var(--police-titre); font-size: 21px; font-weight: 600; line-height: 21px; color: inherit; text-align: center;}

/* ---- jauges : présentation 15, titre + une jauge <progress> par colonne -- */
.rowjauges {padding: 80px 0 0;}
.containerjauges, .containergrandschiffres {width: min(838px, calc(100% - 60px));}
.pres15jauges > .chapeau {margin-bottom: 45px;}
.pres15jauges > .chapeau .tc1 {font-family: var(--police-titre); font-size: 44px; font-weight: 600; line-height: 44px; text-transform: uppercase; text-align: center; color: var(--nuit);}
.pres15.pres15jauges > .col {flex: 0 0 100%;}
.pres15jauges > .col + .col {margin-top: 23px;}
.pres15jauges .txt > .tc2 {margin: 0 0 4px; font-family: var(--police-titre); font-size: 15px; font-weight: 400; line-height: 24px; color: var(--nuit);}
.pres15jauges progress {display: block; width: 100%; height: 27px; border: 0; border-radius: 14px; overflow: hidden; background: #EEE; color: var(--nuit); -webkit-appearance: none; appearance: none;}
.pres15jauges progress::-webkit-progress-bar {background: #EEE; border-radius: 14px;}
.pres15jauges progress::-webkit-progress-value {background: var(--nuit); border-radius: 14px;}
.pres15jauges progress::-moz-progress-bar {background: var(--nuit); border-radius: 14px;}

/* ---- grandschiffres : présentation 15, deux grands chiffres verts -------- */
.rowgrandschiffres {padding: 30px 0 80px;}
.pres15grandschiffres .titres {margin: 0;}
.pres15.pres15grandschiffres {column-gap: 20px;}
.pres15grandschiffres .txt > .tc2 {margin: 0; font-family: var(--police-texte); font-size: 69px; font-weight: 600; line-height: 69px; color: var(--vert); text-align: center;}
.pres15grandschiffres .txt {font-family: var(--police-titre); font-size: 15px; line-height: 33px; color: var(--nuit);}
/* texte sous le chiffre : bloc centré sous le chiffre, lignes alignées à gauche */
.pres15grandschiffres .txt > p:not(.tc2) {width: fit-content; max-width: 100%; margin: 0 auto; text-align: left;}

/* ---- fiche : une fiche de formation découpée en contenus successifs
   (présentations 5, 15, 19). Sans autre style : en-tête de section
   (surtitre + grand titre) ou bouton seul. Avec « carte » : le container
   devient le fond blanc de la carte ; cartehaut / cartebas arrondissent
   le premier et le dernier morceau. Le fond de la row vient de fondnuit
   ou fondgris.                                                             */
.containerfiche {width: min(980px, calc(100% - 40px));}
.rowfiche:not(.rowcarte):has(.titres) {padding: 90px 0 20px;}
.rowfiche:not(.rowcarte):not(:has(.titres)) {padding: 0 0 42px;}
.pres5fiche .titres {text-align: center;}
.pres5fiche .surtitre {margin: 0 0 20px; font-family: var(--police-titre); font-size: 14px; font-weight: 200; line-height: 22.4px; letter-spacing: normal; text-transform: uppercase; color: var(--nuit);}
.rowfondnuit .pres5fiche .surtitre {color: #fff;}
.pres5fiche .tc1 {font-family: var(--police-titre); font-size: 44px; font-weight: 600; line-height: 44px; text-transform: uppercase; text-align: center; color: var(--nuit);}
.pres5fiche > a.readmore {align-self: center; margin: 0; padding: 16px 36px; border-radius: 2px; background: var(--vert); color: var(--nuit); font-family: var(--police-titre); font-size: 15px; font-weight: 500; line-height: 15px; text-transform: uppercase; text-decoration: none; transition: background-color .3s, color .3s;}
.pres5fiche > a.readmore:hover {background: #fff; color: var(--nuit);}
.rowfondnuit .pres5fiche > a.readmore:hover {background: var(--vert); color: var(--nuit);}
/* morceaux de carte */
.row.rowcarte {padding: 0;}
.row.rowcarte > .containerfiche {padding: 20px 40px 0; background: #fff;}
.row.rowcartehaut {padding-top: 50px;}
.row.rowcartehaut > .containerfiche {padding-top: 43px; border-radius: 8px 8px 0 0;}
.row.rowcartebas {padding-bottom: 20px;}
.row.rowcartebas > .containerfiche {padding-bottom: 40px; border-radius: 0 0 8px 8px;}
.row.rowcarte.rowC19 > .containerfiche {padding-top: 35px;}
.row.rowcarte.rowC15 > .containerfiche {padding-top: 45px;}
.row.rowcartebas.rowC15 > .containerfiche {padding-bottom: 50px;}
.row.rowcartebas.rowC5 > .containerfiche {padding-top: 10px;}
.row.rowcarte .pres5fiche .surtitre {display: table; margin: 0 0 20px; padding: 7px; border-radius: 2px; background: var(--nuit); color: #fff; font-size: 11px; font-weight: 500; line-height: 11px; text-transform: lowercase;}
.row.rowcarte .tc1 {font-family: var(--police-titre); font-size: 25px; font-weight: 600; line-height: 34px; text-transform: uppercase; text-align: center; color: var(--nuit);}
.row.rowcarte .tc1vb {margin: 0; font-family: var(--police-titre); font-size: 18px; font-weight: 700; line-height: 27px; text-align: center; color: #4A5568;}
.row.rowcarte .pres .txt {font-family: var(--police-titre); font-size: 16px; font-weight: 200; line-height: 25.6px; color: var(--nuit); text-align: justify;}
.row.rowcarte .pres .txt strong {font-weight: 500;}
.row.rowcarte .pres5fiche > .titres + .txt {margin-top: 20px;}
/* bandeau de 3 informations (présentation 19) */
.row.rowcarte .pres19.pres19fiche {column-gap: 20px; padding: 10px 0; background: rgba(205, 229, 231, .19);}
.pres19fiche > .col {padding: 0 10px;}
.row.rowcarte .pres19fiche .txt {font-family: var(--police-texte); font-size: 17px; font-weight: 400; line-height: 27.2px; text-align: left;}
.row.rowcarte .pres19fiche .txt strong {font-weight: 700;}
/* 2 boutons (présentation 15) */
.pres15.pres15fiche > .col {padding: 0 10px;}
.pres15fiche .txt a.readmore {display: block; margin: 0; padding: 16px 20px; border-radius: 2px; background: var(--nuit); color: #fff; font-family: var(--police-titre); font-size: 15px; font-weight: 500; line-height: 15px; text-transform: uppercase; text-align: center; text-decoration: none; transition: background-color .3s, color .3s;}
.pres15fiche .txt a.readmore:hover {background: var(--vert); color: var(--nuit);}
.pres15fiche .col2 .txt a.readmore {background: #fff; color: var(--nuit); box-shadow: 0 0 10px rgba(0, 0, 0, .5);}
.pres15fiche .col2 .txt a.readmore:hover {background: var(--vert); color: var(--nuit);}
/* lien seul en bas de carte (présentation 5) */
.row.rowcarte .pres5fiche > a.readmore {padding: 16px 20px; background: #fff; color: var(--nuit);}
.row.rowcarte .pres5fiche > a.readmore:hover {background: var(--vert); color: var(--nuit);}

/* ---- etapes : présentation 19, en-tête + 3 étapes à pictogramme ---------- */
.rowetapes {padding: 57px 0 43px;}
.containeretapes {width: min(1120px, calc(100% - 40px));}
.pres19.pres19etapes {column-gap: 20px;}
.pres19etapes > .chapeau {margin-bottom: 20px; text-align: center;}
.pres19etapes .surtitre {margin: 0 0 39px; font-family: var(--police-titre); font-size: 14px; font-weight: 700; line-height: 22.4px; letter-spacing: normal; text-transform: uppercase; color: var(--nuit);}
.pres19etapes > .chapeau .tc1 {font-family: var(--police-titre); font-size: 44px; font-weight: 600; line-height: 44px; text-transform: uppercase; text-align: center; color: var(--nuit);}
.pres19etapes > .chapeau .txt {margin-top: 42px; font-family: var(--police-titre); font-size: 14px; font-weight: 200; line-height: 22.4px; color: var(--nuit); text-align: center;}
.pres19etapes > .chapeau .txt strong {font-weight: 400;}
.pres19etapes > .col > .intcol::before {content: ""; display: block; width: 50px; height: 50px; margin: 0 auto 29px; background-color: var(--nuit); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22a11 11 0 1 0 0-22zM10.2 16.6L5.6 12l1.6-1.6 3 3 6.6-6.6 1.6 1.6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22a11 11 0 1 0 0-22zM10.2 16.6L5.6 12l1.6-1.6 3 3 6.6-6.6 1.6 1.6z'/%3E%3C/svg%3E") center / contain no-repeat;}
.pres19etapes > .col1 > .intcol::before {-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22a11 11 0 1 0 0-22zM6.6 9.6L12 15l5.4-5.4-1.6-1.6L12 11.8 8.2 8z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22a11 11 0 1 0 0-22zM6.6 9.6L12 15l5.4-5.4-1.6-1.6L12 11.8 8.2 8z'/%3E%3C/svg%3E") center / contain no-repeat;}
.pres19etapes > .col .titres {margin: 0;}
.pres19etapes > .col .txt {margin-top: 0;}
.pres19etapes .txt > .tc2 {margin: 0 0 3px; font-family: var(--police-texte); font-size: 17px; font-weight: 700; line-height: 27.2px; color: var(--nuit); text-align: center;}
.pres19etapes .txt {font-family: var(--police-texte); font-size: 17px; line-height: 27.2px; color: var(--texte); text-align: center;}

/* ---- villes : présentation 100, un bouton par ligne PA_IMAGES ------------- */
.rowvilles {padding: 60px 0 31px;}
.containervilles {width: min(1120px, calc(100% - 40px));}
.pres100villes > .chapeau .tc1 {font-family: var(--police-titre); font-size: 44px; font-weight: 600; line-height: 44px; text-transform: uppercase; text-align: center; color: #fff;}
.pres100.pres100villes > .grille {gap: 32px 20px; margin-top: 74px;}
.pres100.pres100villes > .grille {justify-content: flex-start;}
.pres100.pres100villes .col {flex: 0 0 auto; min-width: 170px;}
.pres100villes .txt a.readmore {display: block; margin: 0; padding: 16px 20px; border-radius: 2px; background: #fff; color: var(--nuit); font-family: var(--police-titre); font-size: 15px; font-weight: 500; line-height: 15px; text-transform: uppercase; text-align: center; text-decoration: none; transition: background-color .3s, color .3s;}
.pres100villes .txt a.readmore:hover {background: var(--vert);}
.pres100villes > .pied {margin-top: 90px; font-family: var(--police-texte); font-size: 19px; line-height: 30.4px; color: #fff; text-align: center;}

/* ---- survol des boutons : agrandissement 110 % en 0,3 s (comme la maquette),
   en plus du changement de couleur propre à
   chaque déclinaison                                                       */
.pres3heroaccueil > .coltexte > a.readmore, .pres3heroaccueil .txt > p.bouton a,
.pres5fiche > a.readmore, .pres15fiche .txt a.readmore,
.pres18cartes .txt > a.readmore, .pres15cartes .txt > a.readmore, .pres19cartes .txt > a.readmore,
.pres18cartes .txt > p.boutoncarte a, .pres15cartes .txt > p.boutoncarte a, .pres19cartes .txt > p.boutoncarte a,
.pres100villes .txt a.readmore {transition: background-color .3s, color .3s, transform .3s;}
.pres3heroaccueil > .coltexte > a.readmore:hover, .pres3heroaccueil .txt > p.bouton a:hover, .pres5fiche > a.readmore:hover, .pres15fiche .txt a.readmore:hover, .pres18cartes .txt > a.readmore:hover, .pres15cartes .txt > a.readmore:hover, .pres19cartes .txt > a.readmore:hover, .pres18cartes .txt > p.boutoncarte a:hover, .pres15cartes .txt > p.boutoncarte a:hover, .pres19cartes .txt > p.boutoncarte a:hover, .pres100villes .txt a.readmore:hover, .pres3heroaccueil > .coltexte > a.readmore:focus-visible, .pres3heroaccueil .txt > p.bouton a:focus-visible, .pres5fiche > a.readmore:focus-visible, .pres15fiche .txt a.readmore:focus-visible, .pres18cartes .txt > a.readmore:focus-visible, .pres15cartes .txt > a.readmore:focus-visible, .pres19cartes .txt > a.readmore:focus-visible, .pres18cartes .txt > p.boutoncarte a:focus-visible, .pres15cartes .txt > p.boutoncarte a:focus-visible, .pres19cartes .txt > p.boutoncarte a:focus-visible, .pres100villes .txt a.readmore:focus-visible {transform: scale(1.1);}

/* ---- appel : présentation 15, encadré nuit centré sur photo voilée ------ */
.rowappel {position: relative; display: flex; align-items: center; min-height: 59vh; background: center / cover no-repeat fixed;}
.rowappel::before {content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .5);}
.rowappel > .containerappel {position: relative; z-index: 1; width: min(940px, calc(100% - 48px));}
.pres15.pres15appel {justify-content: center; column-gap: 20px; row-gap: 16px; padding: 30px; border-radius: 3px; background: var(--nuit);}
.pres15appel .box-img {display: none;}
.pres15.pres15appel > .col {flex: 0 0 auto;}
.pres15appel > .chapeau {margin-bottom: 5px;}
.pres15appel > .chapeau .tc1 {font-family: var(--police-titre); font-size: 36px; font-weight: 500; line-height: 36px; text-align: center; color: #FAFEFF;}
.pres15appel > .chapeau .txt {margin-top: 18px; font-family: var(--police-titre); font-size: 14px; font-weight: 200; line-height: 1.6; color: #fff; text-align: center;}
.pres15appel .col .txt a.readmore {display: block; width: auto; margin: 0; padding: 16px 20px; border-radius: 2px; background: #fff; color: var(--nuit); font-family: var(--police-titre); font-size: 15px; font-weight: 500; line-height: 15px; text-transform: uppercase; text-align: center; text-decoration: none; transition: background-color .3s, color .3s;}
.pres15appel .col2 .txt a.readmore {background: var(--vert);}
.pres15appel .col .txt a.readmore:hover {background: #fff; color: var(--nuit);}
/* survol : pulsation (agrandissement aller-retour en continu) */
.pres15appel .col .txt a.readmore:hover, .pres15appel .col .txt a.readmore:focus-visible {animation: pulsation .3s linear infinite alternate;}
@keyframes pulsation {to {transform: scale(1.1);}}

/* ---- fichehero : présentation 3, photo à gauche (40 %), surtitre + H1
   italique, texte, mentions centrées, deux boutons pleine largeur.
   Le 2e bouton est dans le champ HTML (p.bouton) : .txt passe en
   display:contents pour que ses enfants deviennent des éléments flex de la
   colonne, et order le replace après le lien URL01.                       */
.containerfichehero {width: 100%;}
.pres3.pres3fichehero {min-height: 672px; align-items: stretch;}
.pres3.pres3fichehero > .colimage {flex: 0 0 40%; position: relative;}
.pres3fichehero > .colimage .box-img {position: absolute; inset: 0;}
.pres3fichehero > .colimage picture {height: 100%;}
.pres3fichehero > .colimage img {width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center;}
.pres3.pres3fichehero > .coltexte {flex: 1 1 0; display: flex; flex-direction: column; padding: 20px 50px 25px;}
.pres3fichehero .titres {margin: 0 30px 38px 0;}
.pres3fichehero .surtitre {margin: 0; font-family: var(--police-titre); font-size: 36px; font-weight: 600; line-height: 45px; letter-spacing: normal; text-transform: uppercase; color: var(--nuit);}
.pres3fichehero .tc1 {margin: -5px 0 0; font-family: var(--police-titre); font-size: 36px; font-weight: 600; font-style: italic; line-height: 45px; text-transform: uppercase; color: var(--nuit);}
.pres3fichehero > .coltexte > .txt {display: contents;}
.pres3fichehero .txt > p {margin: 0 0 22px; font-family: var(--police-titre); font-size: 14px; line-height: 1.6; color: var(--nuit); text-align: justify;}
.pres3fichehero .txt > p:not(.bouton) {margin-right: 30px;}
.pres3fichehero .txt > p:first-child {margin-bottom: 33px;}
.pres3fichehero .txt > p.mention {text-align: center; font-weight: 700;}
.pres3fichehero .txt > p.chiffres {text-align: center;}
.pres3fichehero > .coltexte > a.readmore {order: 1; display: block; align-self: stretch; margin: 30px 0 0; padding: 19px 19px 20px 18px; border: 1px solid #fff; border-radius: 7px; background: var(--nuit); color: #fff; font-family: var(--police-titre); font-size: 15px; font-weight: 500; line-height: 15px; text-transform: uppercase; text-align: center; text-decoration: none; transition: background-color .3s, color .3s;}
.pres3fichehero > .coltexte > a.readmore:hover {background: var(--vert); color: var(--nuit);}
.pres3fichehero .txt > p.bouton {order: 2; align-self: stretch; margin: 20px 0 0;}
.pres3fichehero .txt > p.bouton a {display: block; padding: 20px 18px 20px 19px; border: 1px solid #fff; border-radius: 6px; background: var(--vert); color: #fff; font-family: var(--police-titre); font-size: 15px; font-weight: 500; line-height: 15px; text-align: center; text-decoration: none; transition: background-color .3s, color .3s;}
.pres3fichehero .txt > p.bouton a:hover {background: var(--nuit); color: #fff;}

/* ---- bandeauinfo : présentation 15, deux informations centrées --------- */
.containerbandeauinfo {width: min(1120px, calc(100% - 20px));}
.pres15.pres15bandeauinfo {column-gap: 20px; padding: 41px 0;}
.pres15bandeauinfo .tc2 {margin: 0; font-family: var(--police-titre); font-size: 20px; font-weight: 400; line-height: 20px; text-align: center; color: var(--nuit);}

/* ---- titres de rubrique : Poppins 28 majuscules, filet vert à la largeur
   du titre (inline-block + ::after), communs à rubrique, accordeon, sessions */
.pres5rubrique .tc1, .pres100accordeon > .chapeau .tc1, .pres19sessions > .chapeau .tc1 {display: inline-block; font-family: var(--police-titre); font-size: 28px; font-weight: 600; line-height: 28px; text-transform: uppercase; color: #000;}
.pres5rubrique .tc1::after, .pres100accordeon > .chapeau .tc1::after, .pres19sessions > .chapeau .tc1::after {content: ""; display: block; height: 5px; margin-top: 9px; background: var(--vert);}

/* ---- rubrique : présentation 5, titre + filet + texte ------------------- */
.containerrubrique, .containeraccordeon {width: min(1100px, calc(100% - 60px));}
.rowrubrique, .rowaccordeon {padding: 25px 0;}
.pres5rubrique > .txt, .pres100accordeon > .pied {margin-top: 22px; font-family: var(--police-titre); font-size: 15px; line-height: 29px; color: #000;}
.pres100accordeon > .pied {margin-top: 20px;}
.pres5rubrique .txt ul, .pres100accordeon > .pied ul {padding-left: 30px;}
.pres5rubrique > a.readmore {display: inline-block; margin-top: 20px; padding: 19px 19px 20px 18px; border: 1px solid var(--nuit); border-radius: 7px; background: var(--vert); color: var(--nuit); font-family: var(--police-titre); font-size: 15px; font-weight: 500; line-height: 15px; text-decoration: none; transition: background-color .3s, color .3s;}
.pres5rubrique > a.readmore:hover {background: #fff; color: var(--nuit);}
/* tableaux posés dans le champ HTML : <table class="tableau"> ou "tableau tarifs" */
.pres5rubrique .txt table.tableau {width: 100%; margin: 0 0 32px; border-collapse: separate; border-spacing: 2px;}
.pres5rubrique .txt table.tableau th {padding: 16px; border-radius: 0; background: var(--nuit); color: #fff; font-family: var(--police-titre); font-size: 16px; font-weight: 600; line-height: 16px; text-align: left;}
.pres5rubrique .txt table.tableau th:first-child {border-radius: 6px 0 0 0;}
.pres5rubrique .txt table.tableau td {padding: 30px 16px; background: var(--lavande); color: #000; font-size: 14px; line-height: 14px; vertical-align: top;}
.pres5rubrique .txt table.tableau.tarifs {width: auto;}
.pres5rubrique .txt table.tableau.tarifs th, .pres5rubrique .txt table.tableau.tarifs td {min-width: 180px;}
.pres5rubrique .txt table.tableau.tarifs th { background: var(--lavande); color: var(--nuit);}
.pres5rubrique .txt table.tableau.tarifs td {padding: 21px 21px 21px 16px; background: #fff; color: var(--nuit); font-weight: 500; line-height: 23px;}

/* ---- accordeon : présentation 100, un volet par ligne PA_IMAGES ----------
   accordeon.js pose .ouvert sur la .col ; le titre (.tc2) est le bouton,
   tout ce qui suit dans .txt est le contenu du volet                       */
.pres100.pres100accordeon > .grille {flex-direction: column; gap: 1px; margin-top: 12px;}
.pres100.pres100accordeon .col {flex: 0 0 auto;}
.pres100accordeon .txt > .tc2 {position: relative; margin: 0; background: #fff; transition: color .3s; padding: 15px 15px 15px 42px; font-family: var(--police-titre); font-size: 17px; font-weight: 400; line-height: 17px; color: var(--nuit); cursor: pointer; user-select: none;}
.pres100accordeon .txt > .tc2::before {content: ""; position: absolute; left: 15px; top: 15px; width: 17px; height: 17px; background-color: currentColor; transition: transform .2s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 4l10 8-10 8z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 4l10 8-10 8z'/%3E%3C/svg%3E") center / contain no-repeat;}
.pres100accordeon .col.ouvert .txt > .tc2 {color: var(--vert);}
.pres100accordeon .col.ouvert .txt > .tc2::before {transform: rotate(-90deg);}
.pres100accordeon .txt {transition: padding-bottom .35s ease, background-color .35s ease;}
/* contenu replié : hauteur nulle et invisible (aussi pour les lecteurs
   d'écran) ; déplié : max-height suffisant, la transition donne l'ouverture
   progressive dans les deux sens                                            */
.pres100accordeon .txt > :not(.tc2) {max-height: 0; overflow: hidden; visibility: hidden; margin: 0 1px 0 24px; font-family: var(--police-titre); font-size: 15px; line-height: 1.6; color: var(--nuit); transition: max-height .35s ease, margin .35s ease, padding .35s ease, visibility .35s;}
.pres100accordeon .col.ouvert .txt {padding-bottom: 30px; background-color: var(--lavande);}
.pres100accordeon .col.ouvert .txt > :not(.tc2) {max-height: 80em; visibility: visible;}
.pres100accordeon .col.ouvert .txt > .tc2 + * {margin-top: 18px;}
.pres100accordeon .col.ouvert .txt ul {padding-left: 20px;}
.pres100accordeon .txt > .tc2:focus-visible {outline: 2px solid var(--vert); outline-offset: -2px;}

/* ---- sessions : présentation 19, cartes de villes ------------------------ */
.rowsessions {padding: 55px 0 35px;}
.containersessions {width: min(1120px, calc(100% - 60px));}
.pres19.pres19sessions {column-gap: 20px; row-gap: 30px;}
.pres19sessions > .chapeau {margin-bottom: 12px;}
.pres19sessions > .col > .intcol {padding: 25px 25px 40px; border-radius: 9px; background: #fff; box-shadow: 2px 4px 10px rgba(0, 0, 0, .25);}
.pres19sessions .txt {font-family: var(--police-titre); font-size: 14px; line-height: 27px; color: #000;}
.pres19sessions .txt .ville {margin: 0 0 19px; font-family: var(--police-titre); font-size: 25px; font-weight: 600; line-height: 25px; text-transform: uppercase; color: #000;}
.pres19sessions .txt ul {margin: 0 0 30px; padding-left: 28px;}
.pres19sessions .txt del {color: #B4B4B4;}

/* ---- autres styles ------------------------------------------------------ */
/* fond nuit, textes blancs */
.rowfondnuit {background: var(--nuit);}
.rowfondnuit .tc1, .rowfondnuit .tc2, .rowfondnuit .pres .txt, .rowfondnuit .pres .txt strong {color: #fff;}
.rowfondnuit .pres .txt p a, .rowfondnuit .pres .txt li a {color: var(--vert);}
.rowfondnuit .pres .txt p a:hover, .rowfondnuit .pres .txt li a:hover {color: #fff;}
/* espace supplémentaire sous une section (82px au lieu de 20px) */
.rowespacebas {padding-bottom: 82px;}
/* espacement d'une série de rubriques : le haut sur la première, le bas sur
   la dernière (les rows intermédiaires se partagent 25px + 25px)            */
.rowhautsection {padding-top: 40px;}
.rowbassection {padding-bottom: 75px;}
.rowfondnuit.rowhautsection {padding-top: 50px;}
.rowfondnuit.rowbassection {padding-bottom: 80px;}
/* lienavant : le lien du contenu passe entre le titre et le texte (pres. 5) */
.rowlienavant .pres5 > .txt {order: 2;}
.rowlienavant .pres5 > a.readmore {order: 1; margin-top: 40px;}
/* boutonnuit : contenu réduit à un bouton bleu nuit */
.rowboutonnuit .containerrubrique {width: min(1120px, calc(100% - 60px));}
.rowboutonnuit .pres5 > a.readmore {margin-top: 0; padding: 19px 45px 20px; border-color: #fff; background: var(--nuit); color: #fff;}
.rowboutonnuit .pres5 > a.readmore:hover {background: var(--vert); color: var(--nuit);}
/* encadre : les volets d'un accordeon dans un cadre ombré (FAQ) */
.rowencadre .containeraccordeon {width: min(1120px, calc(100% - 20px));}
.rowencadre .pres100accordeon > .chapeau .tc1 {text-transform: none;}
.rowencadre .pres100accordeon > .chapeau .tc1::after {margin-top: 36px;}
.rowencadre .pres100accordeon > .grille {gap: 0; margin-top: 22px; border-radius: 9px; overflow: hidden; box-shadow: 0 0 10px -3px rgba(0, 0, 0, .5);}
.rowencadre .pres100accordeon .txt > .tc2 {padding: 15px 50px 15px 48px; border-top: 1px solid rgba(0, 0, 0, .02); border-bottom: 1px solid rgba(0, 0, 0, .02); background: #fff; font-size: 16px; font-weight: 600; line-height: 16px; color: #333;}
.rowencadre .pres100accordeon .col.ouvert .txt > .tc2 {color: var(--vert);}
.rowencadre .pres100accordeon .txt > .tc2::before {left: 18px; top: 16px; width: 16px; height: 16px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M10.5 3h3v18h-3zM3 10.5h18v3H3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M10.5 3h3v18h-3zM3 10.5h18v3H3z'/%3E%3C/svg%3E") center / contain no-repeat;}
.rowencadre .pres100accordeon .col.ouvert .txt > .tc2::before {transform: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M3 10.5h18v3H3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M3 10.5h18v3H3z'/%3E%3C/svg%3E") center / contain no-repeat;}
.rowencadre .pres100accordeon .txt > .tc2::after {content: ""; position: absolute; right: 18px; top: 16px; width: 16px; height: 16px; background-color: currentColor; transition: transform .2s; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;}
.rowencadre .pres100accordeon .col.ouvert .txt > .tc2::after {transform: rotate(90deg);}
.rowencadre .pres100accordeon .col.ouvert .txt {padding-bottom: 0; background: var(--lavande);}
.rowencadre .pres100accordeon .txt > :not(.tc2) {margin: 0; padding: 0 15px; font-size: 16px; color: #333;}
.rowencadre .pres100accordeon .col.ouvert .txt > :not(.tc2) {padding: 15px; border-top: 1px solid #eee;}
.rowencadre .pres100accordeon .col.ouvert .txt > .tc2 + * {margin-top: 0;}
/* fleche : pictogramme flèche cerclée devant les boutons du contenu */
.rowfleche .pres a.readmore, .rowfleche .pres .txt p.bouton a {display: inline-flex; align-items: center; justify-content: center; gap: 14px;}
.rowfleche .pres a.readmore::before, .rowfleche .pres .txt p.bouton a::before {content: ""; flex: none; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill-rule='evenodd' d='M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zM140 300h116v70.9c0 10.7 13 16.1 20.5 8.5l114.3-114.9c4.7-4.7 4.7-12.2 0-16.9l-114.3-115c-7.6-7.6-20.5-2.2-20.5 8.5V212H140c-6.6 0-12 5.4-12 12v64c0 6.6 5.4 12 12 12z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill-rule='evenodd' d='M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zM140 300h116v70.9c0 10.7 13 16.1 20.5 8.5l114.3-114.9c4.7-4.7 4.7-12.2 0-16.9l-114.3-115c-7.6-7.6-20.5-2.2-20.5 8.5V212H140c-6.6 0-12 5.4-12 12v64c0 6.6 5.4 12 12 12z'/%3E%3C/svg%3E") center / contain no-repeat;}
/* fond gris clair de section */
.rowfondgris {background: #F0F0F5;}
/* moitie : grand titre en majuscules, filet épais, texte léger */
.rowtitregrand .pres3moitie > .coltexte {padding: 62px;}
.rowtitregrand .pres3moitie .tc1 {font-size: 32px; line-height: 44px; text-transform: uppercase;}
.rowtitregrand .pres3moitie .titres::after {width: 73%; height: 9px;}
.rowtitregrand .pres3moitie > .coltexte > .txt {margin-top: 35px; font-weight: 200;}
.rowtitregrand .pres3moitie .txt strong {font-weight: 600;}
/* carte, cartehaut, cartebas : mise en page dans la déclinaison fiche ;
   ici, les couleurs du fond blanc reprennent la main sur fondnuit */
.row.rowcarte .pres .txt, .row.rowcarte .pres .txt strong {color: var(--nuit);}
.row.rowcarte .pres .txt p a, .row.rowcarte .pres .txt li a {color: var(--lien);}
.row.rowcarte .pres .txt p a:hover, .row.rowcarte .pres .txt li a:hover {color: var(--lien-survol);}
/* centre : texte centré ; filet : filet vert sous le contenu (présentation 5) */
.row.rowcentre .pres5 > .txt {text-align: center;}
.rowfilet .pres5::after {content: ""; display: block; width: 72%; height: 5px; margin: 10px auto 0; background: var(--vert);}
/* grandtexte / petittexte : corps du champ HTML plus grand / plus petit */
.row.rowgrandtexte .pres .txt {font-size: 20px; line-height: 32px;}
.row.rowpetittexte .pres .txt {font-size: 13px; line-height: 20.8px;}
/* photos de fond en parallaxe, par page (fichiers dans /lib/picts/pages1/) :
   remplacent l'image par défaut de .rowhero / .rowappel                     */
.rowphotokampus1 {background-image: url('/lib/picts/pages1/pexels-kampus-production-8428054-1-scaled.jpg');}
.rowphotoyan {background-image: url('/lib/picts/pages1/pexels-yan-krukau-7698819-1-scaled.jpg');}


/* =========================================================================
   5. MEDIA QUERIES
   ========================================================================= */

/* ---- 1024px : la maquette est déjà en mobile ; ici le menu desktop reste
   jusqu'à 944px, on resserre les marges pour qu'il tienne sur deux lignes -- */
@media (max-width: 1024px) {
  .rowH > .containerA {margin: 0 24px;}
}

/* ---- 943px : bascule mobile de megamenuv4.js (point de rupture imposé) -- */
@media (max-width: 943px) {
  :root {--hauteur-entete: 85px;}
  .rowH > .containerA {margin: 0 24px;}
  .rowH .c1 {flex: 0 0 auto;}
  .rowH .c2 {flex: 1 1 auto; justify-content: flex-end;}
  .rowH .c1 img {width: 150px;}
  .rowH .c3 {display: none;}
  /* bouton burger ajouté par megamenuv4.js ; .actif quand le volet est ouvert */
  .menu a.menu-mobile {display: block; position: relative; width: 37px; height: 31px; font-size: 0; color: var(--nuit); text-decoration: none;}
  .menu a.menu-mobile::before {content: ""; position: absolute; left: 10px; right: 10px; top: 9px; height: 2px; background: currentColor; box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor; transition: transform .2s;}
  .menu a.menu-mobile.actif::before {top: 14px; box-shadow: none; transform: rotate(45deg);}
  .menu a.menu-mobile.actif::after {content: ""; position: absolute; left: 10px; right: 10px; top: 14px; height: 2px; background: currentColor; transform: rotate(-45deg);}
  /* volet : le JS bascule show-on-mobile ; la hauteur est gérée ici */
  .menu > ul {display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - var(--hauteur-entete)); overflow-y: auto; flex-direction: column; align-items: stretch; background: var(--nuit);}
  .menu > ul.show-on-mobile {display: flex;}
  .menu > ul > li {border-bottom: 1px solid rgba(255, 255, 255, .1);}
  .menu > ul > li.last {display: block;}
  /* libellé = vrai lien ; le bouton span.ouvre (injecté par v4) déplie le panneau */
  .menu > ul > li > span {display: flex; align-items: stretch;}
  .menu > ul > li > span > a {flex: 1 1 auto; height: auto; padding: 14px 24px; color: #fff;}
  .menu > ul > li.menu-dropdown-icon > span > a::after {display: none;}
  .menu span.ouvre {display: flex; flex: 0 0 56px; align-items: center; justify-content: center; border-left: 1px solid rgba(255, 255, 255, .1); color: #fff; cursor: pointer;}
  .menu span.ouvre::before {content: ""; width: 16px; height: 16px; background-color: currentColor; transition: transform .2s;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;}
  .menu span.ouvre:hover, .menu span.ouvre:focus-visible {color: var(--vert); outline: none;}
  .menu > ul > li.mFlip > span > .ouvre::before {transform: rotate(180deg);}
  .menu > ul > li > span > a:hover {color: var(--vert);}
  /* au survol (ou au toucher) rien ne s'ouvre : seul li.mFlip ouvre un panneau */
  .menu > ul > li:hover > ul {display: none;}
  .menu > ul > li.mFlip > ul {display: flex;}
  .menu > ul > li > ul {position: static; flex-direction: column; box-shadow: none; background: var(--nuit-clair);}
  .menu li.col {width: auto;}
  .menu li.col + li.col {border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1);}
  .menu li.col a {padding: 12px 24px 12px 40px; text-transform: none;}
}

/* ---- 767px : téléphone -------------------------------------------------- */
@media (max-width: 767px) {
  .rowhero {background-attachment: scroll; background-position: center;}
  .pres3hero {padding-top: 78px;}
  .rowhero .tc1 {font-size: 25px; line-height: 35px;}
  /* pied : une colonne, coordonnées à droite du logo Qualiopi */
  .rowF1 {padding: 20px 0 30px;}
  .rowF1 > .containerA {display: block; width: calc(100% - 20px);}
  .rowF1 .footc1, .rowF1 .footc2 {padding-left: 10px;}
  .rowF1 .footc1 {display: grid; grid-template-columns: 167px 1fr; grid-template-areas: "titre titre" "quali coord" "mention coord" "action coord"; align-items: start;}
  .rowF1 .footc1 .titrepied {grid-area: titre;}
  .rowF1 .coordpied {grid-area: coord; margin-top: 37px;}
  .rowF1 .coordpied p {font-size: 10px; line-height: 18px; margin-bottom: 10px;}
  .rowF1 .coordpied .mailpied {display: block;}
  .rowF1 .qualipied {grid-area: quali; width: 122px; margin-top: 20px;}
  .rowF1 .mentionpied {grid-area: mention; width: 147px; margin-top: 10px; font-size: 7px;}
  .rowF1 .actionpied {grid-area: action; margin-top: 8px; font-size: 8px;}
  .rowF1 .footc2 {margin-top: 30px;}
  .rowF1 .footc2 .titrepied2 {margin-top: 40px;}
  .rowF1 .menupied {grid-template-columns: 1fr 1fr; margin-top: 18px;}
  .rowF1 .menupied a {padding: 7px 4px; font-size: 11px;}
  .rowF1 .reseaux {grid-template-columns: 1fr 1fr; margin-top: 18px;}
  .rowF1 .reseaux a {font-size: 11px;}
  .rowF2 {padding: 22px 0;}
  .rowF2 > .containerA {width: calc(100% - 80px);}
  .rowF2 .footc1 {font-size: 12px;}
  /* page financement */
  .pres15hero > .chapeau {margin-bottom: 23px;}
  .pres15hero .txt a.readmore, .pres15hero .col2 .txt a.readmore {width: 310px;}
  .rowlogotexte {padding: 19px 0 49px;}
  .pres15.pres15logotexte > .col1 {flex: 0 0 100%; padding: 10px 0 20px;}
  .pres15logotexte .col1 .box-img img {width: 237px; margin: 0 auto;}
  .pres15logotexte .col1 .txt {width: 254px; margin: 0 0 0 calc(50% - 117px); padding-left: 0;}
  .pres15.pres15logotexte > .col2 {flex: 0 0 100%; padding: 10px 20px 0;}
  .pres15logotexte .tc2 {margin-bottom: 29px; padding: 0 10px; font-size: 18px; line-height: 28.8px; text-align: center;}
  .pres3moitie > .colimage, .pres4moitie > .colimage {display: none;}
  .pres3moitie > .coltexte, .pres4moitie > .coltexte {padding: 30px 30px 40px;}
  .pres3moitie .tc1, .pres4moitie .tc1 {line-height: 1.7;}
  .pres3.pres3moitie > .col, .pres4.pres4moitie > .col {flex: 0 0 100%;}
  .pres3moitie > .coltexte > .txt, .pres4moitie > .coltexte > .txt {font-size: 13px;}
  .pres3moitie .txt p.relance, .pres4moitie .txt p.relance {font-size: 14px;}
  .rowcartes {padding: 26px 0 100px;}
  .pres18.pres18cartes, .pres15.pres15cartes {grid-template-columns: minmax(0, 1fr);}
  .pres18.pres18cartes, .pres15.pres15cartes {row-gap: 40px;}
  .pres18cartes > .chapeau, .pres15cartes > .chapeau {margin-bottom: 15px;}
  .pres18cartes > .chapeau .tc1, .pres15cartes > .chapeau .tc1 {font-size: 25px;}
  .pres18cartes > .col > .intcol, .pres15cartes > .col > .intcol {padding: 40px 25px;}
  .pres18cartes .tc2, .pres15cartes .tc2 {font-size: 17px; line-height: 1.6;}
  .pres18cartes .intcol > .txt, .pres15cartes .intcol > .txt {font-size: 12px;}
  .pres18cartes .txt ul.infos li, .pres15cartes .txt ul.infos li {padding-left: 0;}
  .pres18cartes .txt ul.infos li::before, .pres15cartes .txt ul.infos li::before {display: none;}
  .pres18cartes .txt > a.readmore, .pres15cartes .txt > a.readmore, .pres18cartes .txt > p.boutoncarte, .pres15cartes .txt > p.boutoncarte, .pres18cartes .txt > p.boutoncarte a, .pres15cartes .txt > p.boutoncarte a {align-self: stretch; display: block; font-size: 12px; line-height: 12px;}
  .rowappel {background-attachment: scroll;}
  .pres15appel > .chapeau .tc1 {font-size: 22px; line-height: 33px;}
  .pres15appel > .chapeau .txt {font-size: 13px;}
  .pres15.pres15appel > .col {flex: 0 0 100%;}
  .pres15appel .col .txt a.readmore {width: max-content; min-width: 192px; margin: 0 auto; white-space: nowrap; padding: 12px 20px; font-size: 12px; line-height: 12px;}
  /* page compétences du repreneur */
  .pres3.pres3fichehero {min-height: 0;}
  .pres3.pres3fichehero > .colimage {display: none;}
  .pres3.pres3fichehero > .coltexte {flex: 0 0 100%; padding: 20px 30px 30px;}
  .pres3fichehero .surtitre, .pres3fichehero .tc1 {font-size: 25px; line-height: 42.5px;}
  .pres3fichehero .titres {margin-bottom: 13px;}
  .pres3fichehero .txt > p {font-size: 13px;}
  .pres3fichehero .txt > p:not(.bouton) {margin-right: 0;}
  .pres3fichehero > .coltexte > a.readmore, .pres3fichehero .txt > p.bouton a {padding: 12px 10px; font-size: 14px; line-height: 14px;}
  .pres15.pres15bandeauinfo {row-gap: 38px; padding: 20px 0 17px;}
  .pres15.pres15bandeauinfo > .col {flex: 0 0 100%;}
  .pres15bandeauinfo .tc2 {font-size: 15px; line-height: 15px;}
  .pres5rubrique .tc1, .pres100accordeon > .chapeau .tc1, .pres19sessions > .chapeau .tc1 {font-size: 23px; line-height: 23px;}
  .rowencadre .pres100accordeon > .chapeau .tc1 {font-size: 28px; line-height: 28px;}
  .pres5rubrique > .txt, .pres100accordeon > .pied {font-size: 14px;}
  .rowfondnuit .pres5rubrique > .txt {font-size: 13px; line-height: 26px;}
  .pres5rubrique .txt table.tableau {table-layout: fixed;}
  .pres5rubrique .txt table.tableau th, .pres5rubrique .txt table.tableau td {overflow-wrap: anywhere;}
  .pres5rubrique .txt table.tableau.tarifs {width: 100%;}
  .pres5rubrique .txt table.tableau.tarifs th, .pres5rubrique .txt table.tableau.tarifs td {min-width: 0;}
  .pres5rubrique .txt table.tableau td {font-size: 12px; line-height: 16.8px;}
  .pres5rubrique > a.readmore {padding: 15px; font-size: 12px; line-height: 12px;}
  .rowboutonnuit .pres5 {align-items: center;}
  .rowboutonnuit .pres5 > a.readmore {align-self: center; padding: 18px 16px 16px; font-size: 14px; line-height: 14px;}
  .pres100accordeon .txt > .tc2 {padding: 12px 12px 12px 39px; font-size: 14px; line-height: 23.8px;}
  .pres100accordeon .txt > .tc2::before {left: 12px; top: 15px;}
  .rowencadre .pres100accordeon .txt > .tc2 {padding: 15px 40px 15px 48px; font-size: 16px; line-height: 16px;}
  .pres100accordeon .col.ouvert .txt > :not(.tc2) {font-size: 13px;}
  .pres19.pres19sessions > .col {flex: 0 0 100%;}
  .pres19sessions > .col > .intcol {padding: 20px;}
  .pres19sessions .txt {font-size: 12px;}
  /* page d'accueil */
  .rowheroaccueil > .containerheroaccueil {width: calc(100% - 80px);}
  .pres3.pres3heroaccueil {min-height: 69vh; padding: 85px 0 40px;}
  .pres3heroaccueil .tc1 {font-size: 33px; line-height: 46.2px;}
  .pres3heroaccueil .tc2 {margin-top: 16px;}
  .pres3heroaccueil > .coltexte > a.readmore {margin-left: 0; padding: 10px 11px 8px; font-size: 13px; line-height: 13px;}
  .pres3heroaccueil .txt > p.bouton {flex: 0 0 100%; margin-top: 13px;}
  .pres3heroaccueil .txt > p.bouton a {display: block; padding: 10px 11px 8px; font-size: 13px; line-height: 13px;}
  .rowchiffres {margin-top: -68px; padding-bottom: 0;}
  .containerchiffres {width: calc(100% - 60px);}
  .pres18.pres18chiffres > .col {flex: 0 0 100%;}
  .pres18chiffres > .col {padding: 0 0 6px;}
  .pres18chiffres > .col > .intcol {min-height: 0; padding: 19px 25px 12px;}
  .pres18chiffres .tc2 {margin-bottom: 10px;}
  .pres18chiffres .tc2 {font-size: 44px; line-height: 44px;}

  .pres18chiffres .txt {font-size: 17px; line-height: 25.5px;}
  .rowtitregrand .pres3moitie > .coltexte {padding: 40px 30px 45px;}
  .rowtitregrand .pres3moitie .tc1 {font-size: 22px; line-height: 39.6px;}
  .rowtitregrand .pres3moitie > .coltexte > .txt {font-size: 12px; line-height: 19.2px;}
  .rowjauges {padding-top: 40px;}
  .pres5fiche .tc1 {font-size: 25px; line-height: 44px;}
  .pres15jauges > .chapeau .tc1, .pres19etapes > .chapeau .tc1, .pres100villes > .chapeau .tc1 {font-size: 23px; line-height: 32.2px;}
  .pres15jauges .tc2 {font-size: 12px; line-height: 19.2px;}
  .pres15.pres15grandschiffres > .col {flex: 0 0 100%;}
  .pres15grandschiffres .tc2 {font-size: 40px; line-height: 40px;}
  .pres15grandschiffres .txt {font-size: 12px;}
  .rowfiche:not(.rowcarte):has(.titres) {padding: 30px 0 20px;}
  .pres5fiche .surtitre {font-size: 12px; line-height: 19.2px;}
  .row.rowcarte > .containerfiche {padding-left: 25px; padding-right: 25px;}
  .row.rowcarte .tc1 {font-size: 17px; line-height: 27.2px;}
  .row.rowcarte .pres .txt, .row.rowgrandtexte .pres .txt, .row.rowpetittexte .pres .txt {font-size: 12px; line-height: 19.2px;}
  .row.rowcarte .pres19fiche .txt {font-size: 17px; line-height: 27.2px;}
  .pres19.pres19fiche > .col, .pres15.pres15fiche > .col {flex: 0 0 100%;}
  .row.rowcarte .pres19.pres19fiche {row-gap: 10px; padding: 15px 0;}
  .row.rowcarte .pres5fiche .surtitre {display: block; font-size: 12px; text-align: center;}
  .pres15.pres15fiche {row-gap: 35px;}
  .pres15fiche .txt a.readmore, .pres5fiche > a.readmore {font-size: 12px; line-height: 12px;}
  .pres5fiche > a.readmore {align-self: stretch; text-align: center;}
  .pres19.pres19cartes {grid-template-columns: minmax(0, 1fr);}
  .pres19cartes > .col > .intcol {padding: 25px;}
  .pres19cartes .txt > p.badge {align-self: stretch; text-align: center;}
  .pres19cartes .tc2 {font-size: 17px; line-height: 27px;}
  .pres19cartes .txt a.readmore {align-self: stretch; font-size: 12px; text-align: center;}
  .pres19.pres19etapes > .col {flex: 0 0 100%; margin-bottom: 40px;}
  .pres19etapes .surtitre {font-size: 12px;}
  .containervilles {width: calc(100% - 20px);}
  .pres100.pres100villes > .grille {gap: 52px;}
  .pres100.pres100villes .col {flex: 0 0 100%;}
  .pres100villes .txt a.readmore {font-size: 12px; line-height: 12px;}
}

@media (prefers-reduced-motion: reduce) {
  .pres a.readmore, .pres .txt p.bouton a, .pres .txt p.boutoncarte a {transition: background-color .3s, color .3s !important; transform: none !important; animation: none !important;}
}