/*
Theme Name: Ergopix
Theme URI: https://www.ergopix.com
Update URI: https://www.ergopix.com
Author: ergopix sàrl
Version: 1.0
Description: Site STM Ship Management, d'après la maquette stm-management/v2 (review.ergopix.dev), variante a « Maquette graphiste v0.6 ».
*/

/* ================= STM — écarts à la feuille de la maquette =================
   Ce fichier est composé par travail/feuille.py (dossier de chantier) : en-tête,
   CSS de la maquette tel quel, ajouts du site (travail/ajouts.css). La feuille
   de la base (mmenu, Slick) est retirée : ses modules et ses bibliothèques le
   sont aussi.

   Écarts, et leur raison :
   1. Bootstrap n'est pas chargé (case « Utiliser Bootstrap » décochée, et sa
      feuille retirée par functions.php si elle revenait) : ni reboot ni classes
      partagées, la maquette retrouve son terrain. Aucune classe à préfixer m-,
      pas de composants.css : le seul composant scripté, le menu mobile, garde
      le script de la maquette.
   2. Inter est servie par le thème (assets/fonts/fonts.css), pas par Google Fonts.
   3. Le contour de focus de la maquette est rétabli : wp.css du plugin ergopix
      l'efface partout (* { outline: 0 !important }).
   4. Encarts (module « Encart ») : la maquette enveloppait ses quatre options
      d'un seul .options ; chaque encart porte ici le sien.
   5. .flotte__intro prend sa couleur d'une variable (--flotte-intro, noir par
      défaut) : la maquette la mettait en ligne (navy) sur Why STM ; le
      réglage passe par les « Ajustements fins » du module, sur la section.
   6. Ajouts pour l'administrable, dans le langage de la maquette : .texte et
      .texte__corps (module « Texte » : pages légales, 404, recherche), .fond-sable
      et .sans-marge-bas (réglages communs des modules), .graphique__bloc et
      .graphique__tete (titre et sous-titre facultatifs des graphiques, retour
      Nicole#9), l'iframe Datawrapper dans son cadre.
   7. Mouvement ajouté à la maquette (7 octobre 2026), dans la grammaire de
      mouvement.md : le compteur des chiffres clés (le seul « geste marquant »,
      assets/js/compteurs.js, chiffres à chasse fixe pendant le décompte), le
      bouton pressé (:active). Côté gabarits : l'image puis la carte en cascade
      dans « Image et texte », l'introduction de « Deux colonnes » qui rejoint
      son titre, l'image de l'en-tête de page au rang 2 de la cascade.
   8. Le bandeau de cookies (GDPR Cookie Compliance) aux couleurs de la maquette,
      règles préfixées « :root … [class] » pour passer devant la feuille du plugin.
   9. Espacement des modules : section.module (marges haut et bas de 50 px,
      champs du module) > div.module__fond (classe, fond et espace intérieur
      du module) ; les marges internes de la maquette qui espaçaient les
      modules sont retirées.
   Les style="" de la maquette (mesures relevées sur le PDF) sont repris dans
   le champ « Ajustements fins » de chaque module et de l'en-tête de page,
   posés sur la <section> : les propriétés personnalisées en descendent.
   @container et cqw : absents de la maquette, rien à déclarer.
*/

/* ================= CSS de la maquette stm-management/v2 (a/_style.css), repris tel quel ================= */

/* STM Ship Management — maquette v2, reproduite depuis v0.6_Website_STM2026.pdf
   Mesures relevées à 1440 px de large ; ruptures à 1000 et 520. */

:root{
  color-scheme: only light;

  --navy:#272f63;
  --navy-profond:#21264c;
  --orange:#ea6753;
  --encre:#19161a;
  --sable:#f7f4f1;
  --carte:#f7f4f1;
  --creme:#f4f2de;
  --titre-clair:#e3dad0;
  --blanc:#fff;

  --contenu:1169px;
  --filet:1px;           /* épaisseur des filets (retour Nicole#3) */
  --nav-chasse:.5px;
  --nav-pas:23.9px;
  --gouttiere:40px;

  --t-surtitre:25px;
  --t-h1:40px;
  --t-h2:30px;
  --t-corps:18px;
  --t-contact:18px;
  --t-petit:15px;

  --sortie:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--blanc);
  color:var(--navy);
  font-family:"Inter", sans-serif;
  font-optical-sizing:none;
  font-variation-settings:"opsz" 18;
  font-size:var(--t-corps);
  line-height:1.35;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
p,h1,h2,h3,ul,dl,figure{ margin:0; }
ul{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }
.contenu{ width:min(var(--contenu), 100% - 2*var(--gouttiere)); margin-inline:auto; }
.visuellement-cache{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ligne{ display:block; }

:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:2px; }

/* ---------- Boutons et liens fléchés ---------- */
.bouton{
  display:inline-flex; align-items:center; justify-content:center;
  height:35px; padding:0 19px;
  background:var(--navy); color:var(--creme);
  font-size:var(--t-petit); font-weight:500; line-height:1;
  border-radius:0;
  transition:background-color .2s var(--sortie);
}
.bouton:hover{ background:var(--navy-profond); }
.lien-fleche{ display:inline-block; color:var(--orange); font-weight:600; font-size:18px; }
.lien-fleche .fleche{ display:inline-block; font-size:.8em; transition:translate .25s var(--sortie); }
.lien-fleche:hover .fleche{ translate:4px 0; }

/* ---------- En-tête ---------- */
.entete{ background:var(--sable); height:124px; position:relative; z-index:5; }
.entete .contenu{ display:flex; align-items:flex-start; padding-top:27px; }
.entete__logo{ margin-left:-1px; flex:none; }
.entete__logo img{ width:211.82px; height:auto; }
.nav{ margin-left:auto; margin-top:32.4px; }
.nav ul{ display:flex; gap:0 var(--nav-pas, 22px); }
.nav a{
  white-space:nowrap;
  font-size:16px; font-weight:500; line-height:20px; letter-spacing:var(--nav-chasse, .03em);
  background:linear-gradient(var(--orange),var(--orange)) 0 100% / 0 var(--filet) no-repeat;
  display:inline-block; padding-bottom:5px;
  transition:background-size .25s var(--sortie);
}
.nav a:hover{ background-size:100% var(--filet); }
.nav a[aria-current="page"]{ font-weight:600; font-style:italic; }
.entete__action{ width:113px; height:34px; margin-left:39px; margin-top:29px; padding:0; font-size:16px; }
.entete__burger{ display:none; }

/* ---------- Haut de page : texte à gauche, image masquée qui déborde à droite ---------- */
.haut{ position:relative; }
.haut__image{
  position:absolute; top:0; right:0;
  width:min(50% - 16px, 704px);
  aspect-ratio:704/610;
  clip-path:url(#masque-haut);
  margin:0;
  /* Firefox mesure le masque (objectBoundingBox) sur ce qui déborde de la figure :
     sans cela, l'image zoomée (Ken Burns, parallaxe) agrandirait la forme avec elle. */
  overflow:hidden;
}
.haut__image img{ width:100%; height:100%; object-fit:cover; }
.haut__texte{ padding-top:111px; }
.haut__texte--min{ min-height:610px; }
.haut__colonne{ max-width:600px; }
.surtitre{ font-size:var(--t-surtitre); font-weight:600; line-height:1.2; color:var(--orange); }
.h1{ font-size:var(--t-h1); font-weight:600; line-height:1.2; margin-top:1px; }
.h1 em{ font-weight:600; }
.h2{ font-size:var(--t-h2); font-weight:600; line-height:1.2; }
.h2 em, .h2.italique{ font-style:italic; }
.haut .h2{ margin-top:48px; max-width:var(--h2-mesure, 460px); font-style:italic; }
.chapeau{ margin-top:25px; max-width:var(--chapeau, 518px); }
.accueil .chapeau{ margin-top:24px; max-width:490px; }

/* forme sable en fond, reprise du PDF (pages intérieures) */
.forme-fond{ position:absolute; left:0; top:var(--forme-haut, 534px); width:705px; height:610px; z-index:-1; fill:var(--sable); }

/* ---------- Accueil : chiffres ---------- */
.accueil-haut{ background:var(--sable); }
.chiffres{ display:grid; grid-template-columns:291fr 296fr 297fr 285fr; text-align:center; }
.chiffres li{
  min-height:75px; display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:600; line-height:1.2;
}
.chiffres li + li{ border-left:var(--filet) solid var(--orange); }
.chiffres li p{ position:relative; top:-11.5px; }
.accueil-chiffres{ background:var(--sable); padding:58px 0 29px; }
.bande-chiffres{ background:var(--carte); padding:32px 0 21px; margin-top:49px; }

/* ---------- Accroche centrée ---------- */
.accroche{ font-size:var(--t-h2); font-weight:400; line-height:1.2; text-align:center; padding-right:30px; }
.accroche em{ display:block; color:var(--orange); }
.solutions{ padding:60px 0 0; }
.solutions .rangee{ margin-top:71px; }

/* ---------- Rangée image + carte ---------- */
.rangee{ display:grid; grid-template-columns:1fr 1fr; gap:31px; }
.rangee__image{ aspect-ratio:569/381; clip-path:url(#masque-carte); margin:0; }
.rangee__image img{ width:100%; height:100%; object-fit:cover; }
.carte{
  background:var(--carte); border-radius:0 80px 0 0;
  padding:var(--carte-haut, 38px) 20px 40px 46px;
}
.carte .h2{ font-style:italic; }
.carte p{ margin-top:12px; max-width:var(--carte-mesure, 485px); }
.carte--haute p{ margin-top:27px; }
.suite, .carte p.suite{ margin-top:23px; }

/* ---------- Texte en deux colonnes ---------- */
.deux-col{ display:grid; grid-template-columns:1fr 1fr; gap:31px; color:var(--encre); }
.deux-col > div:first-child{ max-width:var(--col-g, 512px); }
.deux-col > div:last-child{ max-width:var(--col-d, 505px); margin-top:var(--decalage, 0); }
.deux-col p + p{ margin-top:27px; }

/* ---------- À propos ---------- */
.about-intro .deux-col{ margin-top:115px; --decalage:160px; }
.encart{
  position:relative; margin-top:62px;
  background:var(--navy); color:var(--blanc);
  border-radius:0 0 0 80px;
  padding:35px 120px 62px 51px;
}
.encart .h2{ color:var(--titre-clair); font-style:italic; }
.encart p{ margin-top:28px; max-width:935px; }
.encart__signe{ position:absolute; right:29px; bottom:27px; width:59.5px; height:59.66px; }
.equipe .rangee{ margin-top:98px; }

.valeurs{ padding:84px 0 86px; }
.valeurs__grille{ display:grid; grid-template-columns:1fr 1fr; gap:48px 117px; margin-top:36px; }
.valeur__signe{ height:37px; display:flex; align-items:flex-end; margin-bottom:9px; }
.valeur__signe svg{ overflow:visible; }
.valeur .h2{ padding-bottom:23px; background:linear-gradient(var(--orange),var(--orange)) 0 100% / 209px var(--filet) no-repeat; }
.valeur p{ margin-top:18px; line-height:1.2; max-width:508px; }
.valeur:nth-child(even) p{ max-width:527px; margin-right:-8px; }

/* ---------- Sustainability ---------- */
.domaines{ margin-top:77px; border-bottom:var(--filet) solid var(--navy); }
/* Un titre au-dessus du tableau (ajout au site) : le même écart que sous le
   titre de la grille de pictos (.valeurs__grille). */
.h2 + .domaines{ margin-top:36px; }
.domaines li{
  display:grid; grid-template-columns:454px 1fr; gap:12px;
  border-top:var(--filet) solid var(--navy);
  padding:20px 0 25px 12px;
}
.domaines h3{ font-size:var(--t-corps); font-weight:600; line-height:1.35; color:var(--orange); }
.domaines p{ max-width:652.5px; }
.graphique{ margin:121px 0 0 -16px; max-width:1142px; padding-bottom:128px; }
.graphique__cadre{ aspect-ratio:1142/552; background:var(--sable); }
.graphique__cadre img{ width:100%; height:100%; object-fit:contain; }

/* ---------- Why STM ---------- */
.why-intro .deux-col{ margin-top:56px; --decalage:170px; }
.reseau .rangee{ margin-top:var(--rangee-haut, 67px); }
.flotte{ padding:53px 0 78px; }
.flotte__intro{ margin-top:30px; color:#000; max-width:1150px; }
.flotte .deux-col{ margin-top:var(--deuxcol-haut, 63px); --decalage:0px; }

/* ---------- Contact ---------- */
.contact .h1{ margin-top:23px; }
.contact .chapeau{ margin-top:53px; max-width:584px; }
.coordonnees{ margin-top:29px; font-size:var(--t-contact); line-height:1.5; }
.coordonnees dt{ font-weight:400; }
.coordonnees dd{ margin:0; font-weight:600; }
.coordonnees dd + dt{ margin-top:10px; }
.coordonnees a:hover{ color:var(--orange); }
.disponibilite{ margin-top:25px; }
.citation{ padding:92px 0 100px; }

/* ---------- Appel « Let’s talk » ---------- */
.appel{ background:var(--sable); padding:64px 0 67px; text-align:center; }
.appel .h2{ font-style:italic; }
.appel p{ margin:11px auto 0; max-width:740px; line-height:1.2; }
.appel .bouton{ margin-top:39px; }
.bouton--grand{ font-size:16px; }
.chapeau--suite{ margin-top:27px; }

/* ---------- Pied de page ---------- */
.pied{ position:relative; overflow:hidden; background:var(--navy); color:var(--blanc); min-height:444px; }
.pied__formes{ position:absolute; top:0; right:0; width:659px; height:444px; fill:var(--navy-profond); pointer-events:none; }
.pied .contenu{ position:relative; display:grid; grid-template-columns:359px 365px 1fr; grid-template-rows:auto 1fr; min-height:444px; padding-top:45px; }
.pied__marque{ padding-top:8px; }
.pied__logo{ display:block; width:max-content; margin-left:-2px; }
.pied__logo img{ width:211.82px; }
.pied__liens{ font-size:var(--t-petit); line-height:24px; }
.pied__liens a:hover{ text-decoration:underline; text-underline-offset:3px; }
.pied__contact{ font-size:17px; line-height:21px; padding-top:4px; }
.pied__devise{ font-weight:600; margin-bottom:21px; }
.pied__contact dd{ margin:0; font-weight:600; }
.pied__contact dd + dt{ margin-top:19px; }
.pied__contact a:hover{ color:var(--titre-clair); }
.pied__social{ display:block; width:max-content; margin:49px 0 0 -1px; color:var(--blanc); }
.pied__social svg{ width:35.61px; height:35.61px; fill:currentColor; transition:scale .2s var(--sortie); }
.pied__social:hover svg{ scale:1.08; }
.pied__copyright{ grid-column:1 / -1; align-self:end; font-size:var(--t-petit); line-height:1.2; padding:0 0 64px; }

/* ---------- v2 : rangée image + carte jointes ---------- */
.rangee--jointe{ grid-template-columns:585px 1fr; gap:0; }
.rangee--jointe .rangee__image{ aspect-ratio:585/381; clip-path:none; border-radius:0 0 0 80px; overflow:hidden; }
.rangee--jointe .carte{ padding-left:var(--carte-gauche, 44px); padding-top:var(--carte-haut, 43px); }
.rangee--inverse{ grid-template-columns:585px 1fr; gap:0; }
.rangee--inverse .carte{ order:-1; border-radius:0 0 0 80px; padding:var(--carte-haut, 46px) 20px 40px 57px; }
.rangee--inverse .rangee__image{ border-radius:0 80px 0 0; aspect-ratio:auto; min-height:381px; }
.rangee--inverse .carte p{ margin-top:28.6px; }
.rangee--inverse .carte p.suite{ margin-top:20px; }

/* ---------- v2 : options de bloc d'appel (accueil) ---------- */
.options{ padding-bottom:89px; }
.option{
  position:relative; overflow:hidden; isolation:isolate;
  margin-top:var(--option-haut, 45px);
  min-height:278px; border-radius:0 0 0 80px;
  background:var(--navy); color:var(--blanc);
  padding:33px 120px 48px 67px;
}
.option .h2{ font-style:italic; color:var(--titre-clair); }
.option p{ margin-top:27.6px; max-width:var(--option-mesure, 860px); }
.option p.suite{ margin-top:25px; }
.option .lien-fleche{ color:var(--orange); }
.option--sable{ background:var(--sable); color:var(--navy); }
.option--sable .h2{ color:var(--navy); }
.option--blanc .h2{ color:var(--blanc); }
.option__fond{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.53; z-index:-1; }
.option .encart__signe{ right:29px; bottom:28px; }

/* ---------- v2 : deux graphiques ---------- */
.graphiques{ display:grid; grid-template-columns:582px 582px; gap:30px; margin:147px 0 0 -10px; padding-bottom:52px; }
.graphiques .graphique__cadre{ aspect-ratio:582/456; background:none; margin:0; }

/* ---------- v2 : contacts ---------- */
.coordonnees{ margin-top:25.4px; line-height:22px; }
.coordonnees dd + dt{ margin-top:21px; }

/* ---------- Apparitions (voir _apparitions.js) ---------- */
:root{ --apparition-duree:600ms; --apparition-distance:16px; --apparition-pas:70ms; }
.apparitions .apparait:not(.est-apparu){ opacity:0; }
.apparitions .apparait.est-apparu{
  animation: apparition var(--apparition-duree) var(--sortie, cubic-bezier(.22,1,.36,1)) backwards;
  animation-delay: calc(var(--rang, 0) * var(--apparition-pas));
}
.apparitions .apparait--image.est-apparu{ animation-name: apparition-image; }
@keyframes apparition{ from{ opacity:0; translate:0 var(--apparition-distance); } }
@keyframes apparition-image{ from{ opacity:0; scale:1.04; } }

/* ---------- Image du haut animée (voir assets/js/haut-image.js) ----------
   La variante est la classe de la figure (template-parts/hero.php) :
   .haut__image--kenburns  zoom lent en boucle, sans travelling (réglages : --zoom-max, --zoom-duree) ;
   .haut__image--parallaxe l'image coulisse dans son masque au défilement.
   Pas d'apparition : l'image est là d'emblée. Le script pose sur la figure
   --zoom-repos (le zoom de la parallaxe, plafonné à la résolution du fichier :
   jamais au-delà de 1:1) et --parallaxe-y, puis .est-pret quand l'image est chargée et mesurée : le mouvement part de là,
   depuis l'image au repos, sans saut. */
/* Zoom : un premier aller de 1 à --zoom-max, qui démarre sans traîner, puis une
   boucle sans fin qui en repart : dézoom jusqu'à 1, zoom jusqu'à --zoom-max, et
   ainsi de suite, en courbe sinusoïdale — la moins traînante aux demi-tours ;
   --zoom-duree par trajet. Deux animations de noms distincts, aux valeurs
   écrites en entier : la boucle ne dépend ni du sens de lecture ni de la valeur
   de départ de l'image. Ici, le zoom n'est PAS plafonné à la résolution du
   fichier (choix assumé : à 1.25, l'image peut s'adoucir un peu au sommet du
   zoom sur écran Retina). */
.haut__image--kenburns{ --zoom-max:1.25; --zoom-duree:11s; }
.haut__image--kenburns.est-pret img{
  will-change:scale;
  animation:
    haut-zoom-entree var(--zoom-duree) cubic-bezier(.3,.3,.63,1) forwards,
    haut-zoom-boucle calc(var(--zoom-duree) * 2) linear var(--zoom-duree) infinite;
}
@keyframes haut-zoom-entree{
  from{ scale:1; }
  to{ scale:var(--zoom-max); }
}
@keyframes haut-zoom-boucle{
  0%  { scale:var(--zoom-max); animation-timing-function:cubic-bezier(.37,0,.63,1); }
  50% { scale:1;               animation-timing-function:cubic-bezier(.37,0,.63,1); }
  100%{ scale:var(--zoom-max); }
}
/* Parallaxe : l'image passe en douceur à son zoom de repos, la marge où elle coulisse. */
.haut__image--parallaxe.est-pret img{
  will-change:scale, translate;
  scale:var(--zoom-repos, 1);
  translate:0 var(--parallaxe-y, 0px);
  transition:scale 1.2s var(--sortie);
}
@media (prefers-reduced-motion:reduce){
  :is(.haut__image--kenburns,.haut__image--parallaxe) img{ animation:none !important; scale:none !important; translate:none !important; }
}

/* ================= Tablette ================= */
@media (max-width:1000px){
  :root{ --t-h1:34px; --t-h2:26px; --t-surtitre:22px; --t-corps:19px; }

  .entete{ height:96px; }
  .entete .contenu{ align-items:center; padding-top:0; height:96px; }
  .entete__logo img{ width:170px; }
  .entete__action{ margin:0 0 0 auto; }
  .entete__burger{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; margin-left:12px; margin-right:-10px;
    background:none; border:0; color:var(--navy); cursor:pointer; border-radius:3px;
  }
  .entete__burger svg{ width:24px; height:24px; stroke:currentColor; stroke-width:2; fill:none; }
  .nav{
    position:absolute; top:96px; left:0; right:0; margin:0;
    background:var(--sable); padding:8px var(--gouttiere) 28px;
    box-shadow:0 18px 30px -20px rgb(33 38 76 / .35);
    display:none;
  }
  .entete.est-ouvert .nav{ display:block; }
  .nav ul{ flex-direction:column; gap:0; }
  .nav li + li{ border-top:1px solid color-mix(in srgb, var(--navy) 14%, transparent); }
  .nav a{ display:block; padding:14px 0; font-size:17px; background:none; }

  .haut__image{ position:relative; width:78%; margin-left:auto; }
  .haut__texte{ padding-top:48px; }
  .haut__texte--min{ min-height:0; }
  .forme-fond{ display:none; }

  .accueil-chiffres{ padding-top:56px; }
  .chiffres{ grid-template-columns:1fr 1fr; row-gap:24px; }
  .chiffres li:nth-child(3){ border-left:0; }
  .chiffres li p{ top:0; }
  .bande-chiffres{ padding:28px 0; }

  .rangee{ grid-template-columns:1fr; gap:0; }
  .carte{ padding:var(--carte-haut-t, 36px) 36px 40px; }
  .br-large{ display:none; }
  .accroche{ padding-right:0; }
  .valeur:nth-child(even) p{ margin-right:0; max-width:none; }
  .valeur p, .carte p, .chapeau, .deux-col > div, .domaines p, .flotte__intro, .encart p{ max-width:none !important; }
  .carte p{ max-width:none; }

  .deux-col{ grid-template-columns:1fr; gap:27px; }
  .deux-col > div{ max-width:none !important; margin-top:0 !important; }
  .about-intro .deux-col,.why-intro .deux-col{ margin-top:56px; }

  .encart{ padding:32px 36px 96px; }
  .encart__signe{ right:24px; bottom:24px; width:48px; height:48px; }

  .valeurs__grille{ grid-template-columns:1fr; gap:40px; }
  .domaines li{ grid-template-columns:1fr; gap:10px; padding:22px 0 26px; }
  .graphique{ margin:72px 0 0; padding-bottom:88px; }

  .pied .contenu{ grid-template-columns:1fr 1fr; row-gap:40px; padding-top:48px; }
  .pied__marque{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; padding:0; }
  .pied__social{ margin:0; }
  .rangee--jointe, .rangee--inverse{ grid-template-columns:1fr; }
  .rangee--jointe .rangee__image, .rangee--inverse .rangee__image{ aspect-ratio:585/381; min-height:0; }
  .rangee--inverse .carte{ order:0; padding:36px; }
  .rangee--jointe .carte{ padding:36px; }
  .option{ padding:32px 36px 96px; min-height:0; }
  .option p{ max-width:none; }
  .graphiques{ grid-template-columns:1fr; margin:72px 0 0; gap:40px; }
  .options{ padding-bottom:72px; }
  .pied__copyright{ padding:48px 0 48px; }
  .pied__formes{ opacity:.8; }
}

/* ================= Mobile ================= */
@media (max-width:520px){
  :root{ --gouttiere:20px; --t-h1:30px; --t-h2:24px; --t-surtitre:20px; --t-corps:18px; }

  .entete{ height:80px; }
  .entete .contenu{ height:80px; }
  .entete__logo img{ width:138px; }
  .entete__action{ display:none; }
  .entete__burger{ margin-left:auto; }
  .nav{ top:80px; }

  .haut__image{ width:calc(100% - var(--gouttiere)); }
  .haut__texte{ padding-top:40px; }
  .haut .h2{ margin-top:28px; }
  .chiffres li{ font-size:16px; }
  .accroche{ font-size:24px; }
  .solutions{ padding:56px 0 64px; }
  .solutions .rangee{ margin-top:48px; }
  .carte{ padding:30px 24px 32px; border-radius:0 56px 0 0; }
  .encart{ padding:28px 24px 88px; border-radius:0 0 0 56px; }
  .option{ padding:28px 24px 88px; border-radius:0 0 0 56px; margin-top:24px; }
  .rangee--jointe .rangee__image{ border-radius:0 0 0 56px; }
  .rangee--inverse .carte{ border-radius:0 0 0 56px; padding:30px 24px 32px; }
  .rangee--inverse .rangee__image{ border-radius:0 56px 0 0; }
  .rangee--jointe .carte{ padding:30px 24px 32px; }
  .appel{ padding:48px 0 56px; }
  .appel .bouton{ margin-top:28px; }
  .citation{ padding:56px 0 48px; }
  .accroche em{ display:inline; }

  .pied .contenu{ grid-template-columns:1fr; }
  .pied__formes{ opacity:.55; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; }
}

/* ================= Ajouts du site (travail/ajouts.css) ================= */

/* 3. Le contour de focus de la maquette, rétabli contre wp.css du plugin ergopix. */
:focus-visible{ outline:2px solid var(--orange) !important; outline-offset:3px; }

/* 5. La couleur de l'introduction du module « Deux colonnes ». */
.flotte__intro{ color:var(--flotte-intro, #000); }

/* 6. Réglages communs des modules : fond sable, marge du bas supprimée. */
.fond-sable{ background:var(--sable); display:flow-root; } /* flow-root : les marges du contenu restent dans le fond */
.sans-marge-bas{ padding-bottom:0 !important; }

/* 9. Espacement des modules (include/helpers.php, stm_section) : deux boîtes.
   section.module porte l'espacement entre les modules, et rien d'autre :
   50 px en haut et en bas selon les champs « Marge haut » et « Marge bas »,
   en padding pour que deux modules voisins s'additionnent (100, 50 ou 0 px) ;
   un espacement sur mesure passe par les « Ajustements fins », posés sur elle.
   div.module__fond est le module : sa classe (.valeurs, .flotte…), son fond et
   son espace intérieur, ceux de la maquette. Les marges que la maquette posait
   DANS les modules pour les espacer les uns des autres sont retirées ici :
   elles doublaient la marge du module. */
.module--marge-haut{ padding-top:50px; }
.module--marge-bas{ padding-bottom:50px; }
.bande-chiffres{ margin-top:0; }
.encart{ margin-top:0; }
.domaines{ margin-top:0; }                          /* sous un titre : 36 px (.h2 + .domaines) */
.reseau .rangee{ margin-top:var(--rangee-haut, 0px); }
.option{ margin-top:var(--option-haut, 0px); }
.graphiques{ margin-top:0; padding-bottom:0; }
/* Les modules sans espace intérieur dans la maquette (Image et texte sans
   accroche, Encart compact, Tableau, Graphiques) : sur fond sable, 50 px pour
   que le contenu ne touche pas le bord du fond. */
.module__fond.fond-sable:not(.valeurs, .flotte, .citation, .options, .texte, .solutions, .accueil-chiffres, .bande-chiffres){ padding-block:50px; }

/* 6. Module « Texte » — texte courant des pages que la maquette ne dessine pas.
   Mesures de la maquette : contenu 1169 px, corps 20 px, titres en navy 600,
   liens orange, filets de --filet. */
.texte{ padding:80px 0 100px; }
.texte .h1 + .texte__corps{ margin-top:40px; }
.texte .surtitre + .h1{ margin-top:12px; }
.texte__corps{ max-width:840px; }
.texte__corps > * + *{ margin-top:20px; }
.texte__corps h2{ font-size:var(--t-h2); font-weight:600; line-height:1.2; font-style:italic; margin-top:48px; }
.texte__corps h3{ font-size:var(--t-corps); font-weight:600; line-height:1.35; color:var(--orange); margin-top:36px; }
.texte__corps h2 + *, .texte__corps h3 + *{ margin-top:12px; }
.texte__corps ul, .texte__corps ol{ padding-left:1.2em; }
.texte__corps ul{ list-style:disc; }
.texte__corps li + li{ margin-top:6px; }
.texte__corps a:not(.bouton):not(.lien-fleche){ color:var(--orange); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:var(--filet); }
.texte__corps hr{ border:0; border-top:var(--filet) solid var(--navy); margin:40px 0; }
.texte__corps strong{ font-weight:600; }
@media (max-width:520px){
  .texte{ padding:56px 0 64px; }
}

/* 6. Graphiques : titre et sous-titre facultatifs au-dessus du cadre, et
   l'iframe Datawrapper qui remplit le cadre comme l'image de la maquette. */
.graphique__bloc{ display:flex; flex-direction:column; }
.graphique__tete{ margin-bottom:16px; }
.graphique__tete h3{ font-size:var(--t-corps); font-weight:600; line-height:1.35; color:var(--orange); }
.graphique__tete p{ font-size:var(--t-contact); line-height:1.3; margin-top:4px; }
.graphique__cadre iframe{ display:block; width:100%; height:100%; border:0; }

/* 7. Mouvement, en plus de la maquette : le bouton pressé (retour d'un pixel,
   l'état qui manquait aux cinq de mouvement.md), et les chiffres à chasse fixe
   pendant le décompte des chiffres clés (assets/js/compteurs.js), pour que le
   nombre ne tremble pas ; la valeur finale reprend les chiffres de la maquette. */
.bouton:active{ translate:0 1px; }
[data-compteur].compte-en-cours{ font-variant-numeric:tabular-nums; }

/* 8. Bandeau de cookies (GDPR Cookie Compliance, hérité de la base), aux couleurs
   de la maquette : fond sable et filet navy comme l'en-tête, texte navy en 15 px
   dans la largeur du contenu, boutons .bouton de la maquette (navy, angle droit)
   pour « accepter » comme pour « refuser » — même poids aux deux choix —,
   réglages en contour. La couleur de marque (navy), la police (héritée) et le
   logo de la fenêtre de réglages sont dans les options du plugin ; le reste est
   ici, préfixé « :root … [class] » pour passer devant sa feuille, chargée après
   celle du thème, y compris ses règles de thème clair. */
:root #moove_gdpr_cookie_info_bar[class]{ background:var(--sable); border-top:var(--filet) solid var(--navy); color:var(--navy); font-family:inherit; }
:root #moove_gdpr_cookie_info_bar[class] .moove-gdpr-info-bar-container{ display:block; width:min(var(--contenu), 100% - 2*var(--gouttiere)); margin-inline:auto; padding:22px 0; }
:root #moove_gdpr_cookie_info_bar[class] .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content{ padding:0; gap:16px 40px; justify-content:space-between; }
:root #moove_gdpr_cookie_info_bar[class] .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p{ font-size:var(--t-petit); line-height:1.4; font-weight:400; color:var(--navy); }
:root #moove_gdpr_cookie_info_bar[class] .moove-gdpr-cookie-notice button.change-settings-button{ color:var(--orange); font-weight:500; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:var(--filet); }
:root #moove_gdpr_cookie_info_bar[class] .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content .moove-gdpr-button-holder{ flex:none; gap:10px; padding-left:0; }
:root #moove_gdpr_cookie_info_bar[class] .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton{
  display:inline-flex; align-items:center; justify-content:center; height:35px; margin:0; padding:0 19px;
  border-radius:0; box-shadow:none; opacity:1;
  background-color:var(--navy); color:var(--creme);
  font-size:var(--t-petit); font-weight:500; line-height:1;
  transition:background-color .2s var(--sortie), color .2s var(--sortie);
}
:root #moove_gdpr_cookie_info_bar[class] .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton:hover{ background-color:var(--navy-profond); color:var(--creme); }
:root #moove_gdpr_cookie_info_bar[class] .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton.moove-gdpr-infobar-settings-btn{ background-color:transparent; color:var(--navy); box-shadow:inset 0 0 0 var(--filet) var(--navy); }
:root #moove_gdpr_cookie_info_bar[class] .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton.moove-gdpr-infobar-settings-btn:hover{ background-color:var(--navy); color:var(--creme); }
:root #moove_gdpr_cookie_info_bar[class] .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton:active{ translate:0 1px; }
@media (max-width:1000px){
  :root #moove_gdpr_cookie_info_bar[class] .moove-gdpr-info-bar-container{ padding:18px 0 20px; }
  :root #moove_gdpr_cookie_info_bar[class] .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content .moove-gdpr-cookie-notice{ padding-left:0; margin-bottom:14px; }
  :root #moove_gdpr_cookie_info_bar[class] .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content .moove-gdpr-button-holder{ flex-wrap:wrap; }
}