/* ==========================================================================
   SPCV - thème WordPress (enfant de Twenty Twenty-Five)
   Feuille générée à partir de assets/css/styles.css du site statique :
   la partie « charte » ci-dessous est la feuille d'origine, à modifier de la même façon
   (variables en tête de fichier). Les adaptations WordPress sont regroupées en fin de fichier.
   ========================================================================== */

/* ==========================================================================
   SPCV - Design system
   Charte Borflex depuis le 16/09 : rouge #DC0C15, bleu/gris #3F5760, Open Sans (essai) + IBM Plex Mono, angles vifs.
   Une seule source de vérité pour les typographies, couleurs et espacements.
   Pour changer la charte : modifier UNIQUEMENT les variables ci-dessous.
   ========================================================================== */

/* ---------- Polices (servies en local, aucune requête vers Google) ---------- */

/* Open Sans (charte Borflex, police "print" ; Altivo, la police web, est commerciale et
   non fournie). Police variable : un fichier par sous-ensemble couvre les graisses 300 a 800. */

:root {
  /* Couleurs : charte graphique Borflex (Univers de marque, « Les couleurs »).
     Trois couleurs : rouge #DC0C15 (Pantone 485C), bleu/gris #3F5760
     (Pantone 7545C), blanc. Les teintes sont celles de la charte, obtenues en
     melangeant la couleur au blanc : 70 %, 40 %, 10 % (plus un 20 % pour les
     bordures et un 5 % pour les fonds, trop clairs sinon). Le rouge fonce du
     survol est le seul ton hors charte : le rouge lui-meme assombri de 20 %. */
  --c-primaire: #dc0c15;          /* rouge 100 % */
  --c-primaire-fonce: #b00a11;    /* rouge assombri, survol des boutons */
  --c-accent: #dc0c15;
  --c-rouge-70: #e7555b;
  --c-rouge-40: #f19ea1;
  --c-rouge-10: #fce7e8;
  --c-fond: #ffffff;
  --c-fond-doux: #f5f7f7;         /* bleu/gris 5 % */
  --c-sombre: #3f5760;            /* bleu/gris 100 % : pied de page, bandes sombres */
  --c-texte: #3f5760;             /* bleu/gris 100 % : titres et texte courant */
  --c-texte-2: #3f5760;
  --c-texte-doux: #798990;        /* bleu/gris 70 % */
  --c-gris: #b2bcbf;              /* bleu/gris 40 % */
  --c-blanc: #ffffff;
  --c-bordure: #eceeef;           /* bleu/gris 10 % */
  --c-bordure-2: #d9dfe1;         /* bleu/gris 20 % */
  --c-trame: #eceeef;             /* bleu/gris 10 % */

  /* Typographie */
  --police: "Archivo", "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;  /* Archivo en tete ; Open Sans (charte) reste declaree, on bascule en inversant les deux */
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fs-petit: 0.8125rem;
  --fs-base: 1rem;
  --fs-h4: 1.05rem;
  --fs-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-h2: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --fs-h1: clamp(2.3rem, 1.6rem + 2.6vw, 3.5rem);
  --interligne: 1.65;

  /* Espacements et gabarit */
  --largeur-max: 1220px;
  --esp-1: 0.5rem;
  --esp-2: 1rem;
  --esp-3: 1.75rem;
  --esp-4: 3rem;
  --esp-5: 3.25rem;   /* espace entre sections, reduit le 14/09 (etait 4.875rem) */
  /* Hauteur du logo dans l'en-tete. C'est le seul reglage a toucher pour
     l'agrandir ou le reduire : la hauteur de l'en-tete suit toute seule. */
  --hauteur-logo: 4.75rem;
  --rayon: 0px;
  --ombre: 0 20px 44px rgba(63, 87, 96, 0.13);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Une ancre visee depuis un lien s'arrete sous l'entete collante, pas derriere. */
[id] { scroll-margin-top: 8rem; }
body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--fs-base);
  line-height: var(--interligne);
  color: var(--c-texte);
  background: var(--c-fond);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-primaire); text-decoration: none; }
a:hover { color: var(--c-primaire-fonce); }
:focus-visible { outline: 2px solid var(--c-primaire); outline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--police);
  line-height: 1.12;
  color: var(--c-texte);
  margin: 0 0 var(--esp-2);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.05; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: var(--fs-h4); font-weight: 700; }
p { margin: 0 0 var(--esp-2); }

/* ---------- Remises à zéro pour les blocs WordPress ---------- */
:where(figure.wp-block-image) { margin: 0; }
.wp-block-image img { vertical-align: top; }
:where(.wp-site-blocks, .wp-block-post-content, .entry-content) { padding: 0; margin: 0; }
.wp-site-blocks > * { margin-block: 0; }
/* Paragraphes issus d'anciens libellés <span> ou <div> : pas de marge propre. */
p:where(.surtitre, .cle, .val, .valeur, .legende, .carte-date, .carte-lien, .produit-ref, .produit-nom,
  .activite-libelle, .processus-num, .processus-libelle, .lien-flech, .cartouche, .vide) { margin: 0; }


.conteneur {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 2rem;
}

/* ---------- Boutons (angles vifs) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.94rem 1.625rem;
  border-radius: var(--rayon);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.btn-primaire { background: var(--c-primaire); color: var(--c-blanc); }
.btn-primaire:hover { background: var(--c-primaire-fonce); color: var(--c-blanc); }
.btn-primaire::after { content: "→"; font-family: var(--mono); }
.btn-secondaire { background: transparent; color: var(--c-texte); box-shadow: inset 0 0 0 1.5px var(--c-bordure-2); }
.btn-secondaire:hover { background: var(--c-texte); color: var(--c-blanc); box-shadow: inset 0 0 0 1.5px var(--c-texte); }

/* ---------- En-tête / navigation ---------- */
.entete {
  background: var(--c-blanc);
  border-bottom: 1px solid var(--c-bordure);
  position: sticky;
  top: 0;
  z-index: 50;
}
.entete-int {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--esp-3);
  /* Le logo commande la hauteur : sa taille, plus une marge au-dessus et
     en dessous. */
  min-height: calc(var(--hauteur-logo) + 2.25rem);
}
.logo { display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.logo img, .logo .logo-image { height: var(--hauteur-logo); width: auto; }
.logo-texte { font-size: 1.4375rem; font-weight: 800; color: var(--c-texte); letter-spacing: 0.06em; line-height: 1.1; }
.logo-sous {
  display: none;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 400;
  color: var(--c-gris);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.25rem;
}

.nav { display: flex; align-items: stretch; gap: 2px; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; align-items: stretch; }
.nav li { position: relative; display: flex; align-items: stretch; }
.nav > ul > li > a {
  display: flex;
  align-items: center;
  padding: 0 0.6rem;
  text-decoration: none;
  color: var(--c-texte-2);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--rayon);
}
.nav > ul > li > a:hover { color: var(--c-primaire); }
.nav > ul > li.actif > a { color: var(--c-texte); }
.nav > ul > li.actif > a::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 0;
  height: 2px;
  background: var(--c-primaire);
}

.sous-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--c-blanc);
  border: 1px solid var(--c-bordure);
  border-top: 2px solid var(--c-primaire);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  min-width: 15.625rem;
  padding: 6px;
  flex-direction: column;
  z-index: 60;
}
.nav li:hover > .sous-menu, .nav li:focus-within > .sous-menu { display: flex; }
.sous-menu a {
  padding: 0.6875rem 0.875rem;
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--c-texte-2);
  letter-spacing: 0.01em;
}
.sous-menu a:hover { color: var(--c-primaire); background: var(--c-fond-doux); }

/* Selecteur de langue : un bouton (drapeau + code) qui deroule la liste des
   langues au survol ou au clavier, comme les sous-menus. */
.langues { position: relative; display: flex; align-items: center; margin-left: 0.6rem; }
.langues img { width: 20px; height: 14px; border: 1px solid var(--c-bordure-2); display: block; }
.langues-courante {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.55rem;
  background: none;
  border: 1px solid var(--c-bordure-2);
  border-radius: var(--rayon);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-texte-2);
  cursor: pointer;
}
.langues-courante .chevron { margin-left: 0; margin-bottom: 0.15rem; }
.langues:hover .langues-courante, .langues:focus-within .langues-courante { border-color: var(--c-texte); color: var(--c-texte); }
.langues:hover .langues-courante .chevron, .langues:focus-within .langues-courante .chevron { transform: rotate(225deg); margin-bottom: -0.1rem; opacity: 1; }
.langues-liste {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.35rem;
  min-width: 11rem;
  padding: 6px;
  background: var(--c-blanc);
  border: 1px solid var(--c-bordure);
  border-top: 2px solid var(--c-primaire);
  box-shadow: var(--ombre);
  flex-direction: column;
  z-index: 60;
}
.langues:hover .langues-liste, .langues:focus-within .langues-liste { display: flex; }
.langues-liste a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--c-texte-2);
  text-decoration: none;
}
.langues-liste a:hover { color: var(--c-primaire); background: var(--c-fond-doux); }
.langues-liste a.actif { font-weight: 700; color: var(--c-texte); }
.langues-liste a.actif::after { content: "✓"; margin-left: auto; font-family: var(--mono); color: var(--c-primaire); }

.burger {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--c-texte);
  cursor: pointer;
  padding: 0.4rem;
}

/* ---------- Hero ---------- */
.hero {
  background: var(--c-fond-doux);
  border-bottom: 1px solid var(--c-bordure);
  position: relative;
  overflow: hidden;
  padding: 3.5rem 0;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--c-trame) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-trame) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.5;
  pointer-events: none;
}
.hero-int {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.75rem;
  align-items: center;
  position: relative;
}
.hero-texte .surtitre {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-primaire);
  margin-bottom: 1.625rem;
}
.hero-texte .surtitre::before { content: ""; width: 26px; height: 2px; background: var(--c-primaire); display: block; }
.hero-texte h1 { margin-bottom: 1.5rem; }
.hero-texte > p:not(.surtitre) { font-size: 1.15rem; line-height: 1.65; color: var(--c-texte-doux); max-width: 38rem; margin-bottom: 2.125rem; }
.hero-actions { display: flex; gap: 0.875rem; flex-wrap: wrap; }

/* Bande de repères sous le hero (norme, certification, matière) */
.reperes {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--c-bordure);
  margin-top: 2.5rem;
  padding-top: 1.375rem;
}
.repere { padding: 0 1.625rem; border-left: 1px solid var(--c-bordure); }
.repere:first-child { padding-left: 0; border-left: none; }
.repere .cle {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--c-gris);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.repere .val { font-weight: 700; font-size: 0.9375rem; color: var(--c-texte-2); }

/* Image encadrée façon planche technique, avec équerres d'angle */
.hero-image { position: relative; }
.hero-image img { border: 1px solid var(--c-bordure-2); background: #fff; padding: 10px; width: 100%; }
.hero-image::before, .hero-image::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
}
.hero-image::before { top: -1px; right: -1px; border-top: 2px solid var(--c-primaire); border-right: 2px solid var(--c-primaire); }
.hero-image::after { bottom: -1px; left: -1px; border-bottom: 2px solid var(--c-primaire); border-left: 2px solid var(--c-primaire); }

/* Hero simple (pages internes) */
.hero-page {
  background: var(--c-fond-doux);
  border-bottom: 1px solid var(--c-bordure);
  padding: var(--esp-4) 0;
  position: relative;
  overflow: hidden;
}
.hero-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--c-trame) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-trame) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.5;
  pointer-events: none;
}
.hero-page .conteneur { position: relative; }
.hero-page .fil {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-gris);
  margin-bottom: 0.75rem;
}
.hero-page .fil a { color: var(--c-gris); }
.hero-page .fil a:hover { color: var(--c-primaire); }
.hero-page p.intro { font-size: 1.15rem; color: var(--c-texte-doux); max-width: 44rem; margin-bottom: 0; }

/* ---------- Sections ---------- */
.section { padding: var(--esp-5) 0; }
.section-douce { background: var(--c-sombre); color: var(--c-blanc); padding: 0; }
/* Le padding nul convient au bandeau de chiffres de l'accueil, dont chaque
   bloc porte sa propre marge et qui se veut plein bord. Il ne convient pas a
   une section de cartes : les cartes blanches touchaient alors le haut et le
   bas du bandeau sombre, sans aucune respiration. */
.section-douce.section-cartes { padding: var(--esp-5) 0; }
.section-titre { max-width: 46rem; margin: 0 0 var(--esp-3); }
.section-titre h2 { margin-bottom: 0.75rem; }
.section-titre p { color: var(--c-texte-doux); }

/* Bloc texte + image alterné */
.bloc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-4);
  align-items: center;
  padding: var(--esp-2) 0;
}
.bloc-image { position: relative; }
.bloc-image img { border: 1px solid var(--c-bordure-2); background: #fff; padding: 10px; width: auto; max-width: 100%; max-height: 30rem; margin: 0 auto; }
/* Sur une page interne, l'image prend exactement la hauteur du texte (au moins
   22rem) : centree, elle repoussait le texte de 200 px vers le bas ; calee en
   haut, elle laissait un vide sous un texte court. Elle est recadree (cover) ;
   une photo produit qu'il ne faut pas rogner demande « image_ajustement:
   contain » dans l'en-tete de la page ; une image trop petite pour etre
   agrandie sans pixeliser demande « image_ajustement: naturel » (taille
   d'origine, calee en haut, comme avant le 14/09). Les logos et la carte a
   cartouche gardent leur propre regle. */
.bloc-haut { align-items: stretch; }
.bloc-haut .prose > :first-child { margin-top: 0; }
.bloc-haut .bloc-image:not(.est-logo):not(.a-cartouche):not(.ajuste-naturel) { position: relative; min-height: 22rem; }
.bloc-haut .bloc-image:not(.est-logo):not(.a-cartouche):not(.ajuste-naturel) img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
}
/* Image entiere (« contain ») : elle prend la hauteur du texte et le cadre
   blanc se resserre sur elle, centre dans la colonne, au lieu d'encadrer des
   marges vides sur toute la largeur. Placee apres la regle « cover » avec le
   meme poids : elle gagne. */
.bloc-haut .bloc-image.ajuste-contain:not(.est-logo):not(.a-cartouche) img {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.bloc-haut .bloc-image.a-cartouche { align-self: start; }
.bloc-haut .bloc-image.ajuste-naturel { align-self: start; }
/* L'encart du processus est du texte : il ne s'etire pas jusqu'au bas du
   texte voisin, il garde sa hauteur propre, cale en haut. */
.bloc-haut .processus { align-self: start; }
@media (max-width: 62rem) {
  .bloc-haut .bloc-image:not(.est-logo):not(.a-cartouche):not(.ajuste-naturel) { min-height: 0; }
  .bloc-haut .bloc-image:not(.est-logo):not(.a-cartouche):not(.ajuste-naturel) img { position: static; height: auto; aspect-ratio: 4 / 3; }
  .bloc-haut .bloc-image.ajuste-contain:not(.est-logo):not(.a-cartouche) img { left: auto; transform: none; aspect-ratio: auto; }
}
.bloc.inverse .bloc-image { order: -1; }
.bloc h2 { color: var(--c-texte); }
.bloc h3 { color: var(--c-texte); }

/* Un logo place dans un bloc : borne en hauteur et centre, plutot qu'etire
   sur toute la largeur de la colonne. Un logo n'a jamais assez de pixels pour
   remplir 586 px, et l'etirer le rend flou. */
.bloc-image.est-logo { display: flex; align-items: center; justify-content: center; }
.bloc-image.est-logo img {
  width: auto;
  max-width: 100%;
  max-height: 9rem;
  border: 0;
  padding: 0;
}

/* Images detourees (logos, pictogrammes) : elles ne se recadrent pas.
   Le recadrage en 4/3 coupait le symbole du recyclage en haut et en bas, et
   l'empreinte CO2 sur les cotes. La classe est posee automatiquement par le
   shortcode, d'apres le nombre de couleurs de l'image. */
.carte .est-detoure img {
  object-fit: contain;
  background: var(--c-blanc, #fff);
  padding: 1.25rem;
}

/* Cadre d'attente, quand aucune photo n'existe pour une carte. Il occupe la
   meme place qu'une image, ce qui aligne les cartes entre elles, et il dit
   ce qui manque plutot que de laisser un trou. */
.carte-illustration {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  background: repeating-linear-gradient(
    45deg, var(--c-fond-doux), var(--c-fond-doux) 10px, var(--c-trame) 10px, var(--c-trame) 20px);
  border-bottom: 1px solid var(--c-bordure-2);
  color: var(--c-gris);
  font-size: 0.82rem;
  line-height: 1.4;
}
.carte-illustration span { max-width: 16rem; }

/* Bande « Ils nous font confiance ». Les logos y sont de formats tres
   differents : ils se centrent dans leur cadre sans jamais etre rognes. */
.cartes-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--esp-3); }
.carte-logo {
  background: var(--c-blanc, #fff);
  border: 1px solid var(--c-bordure-2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7rem;
  padding: 1.25rem;
}
.carte-logo img {
  aspect-ratio: auto;
  object-fit: contain;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 4.5rem;
  background: none;
  padding: 0;
}
@media (max-width: 62rem) { .cartes-logos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 40rem) { .cartes-logos { grid-template-columns: repeat(2, 1fr); } }

/* Le logo de l'en-tete remplace le texte : sa hauteur est celle qu'occupait
   le nom de la societe. */

/* Cartes */
.cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-3); }
.cartes-2 { grid-template-columns: repeat(2, 1fr); }
.cartes-4 { grid-template-columns: repeat(4, 1fr); }
.carte {
  background: var(--c-blanc);
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.carte:hover {
  transform: translateY(-3px);
  border-color: var(--c-bordure-2);
  box-shadow: var(--ombre);
  color: inherit;
}
.carte img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.carte-corps { padding: var(--esp-3); flex: 1; }
.carte-corps h3 { margin-bottom: 0.5rem; }
.carte-corps p { color: var(--c-texte-doux); font-size: 0.9375rem; margin: 0; }
.carte-lien {
  padding: 0 var(--esp-3) var(--esp-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-primaire);
}

/* Bandeau de chiffres clés, numéroté, sur fond sombre */
.chiffres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  counter-reset: chiffre;
}
.chiffre { padding: 2.25rem 1.75rem; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.chiffre:first-child { border-left: none; padding-left: 0; }
.chiffre::before {
  counter-increment: chiffre;
  content: "0" counter(chiffre);
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--c-primaire);
  margin-bottom: 0.875rem;
}
.chiffre .valeur { font-size: 2.9rem; font-weight: 800; color: var(--c-blanc); line-height: 1; letter-spacing: -0.02em; }
.chiffre .legende { color: var(--c-gris); font-size: 0.84375rem; margin-top: 0.75rem; line-height: 1.5; }

/* Liste de points forts */
.points { list-style: none; padding: 0; margin: 0 0 var(--esp-2); }
.points li { padding-left: 1.75rem; position: relative; margin-bottom: 0.6rem; }
.points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 0.75rem; height: 2px;
  background: var(--c-primaire);
}

/* Bandeau CTA */
.cta {
  background: var(--c-sombre);
  color: var(--c-blanc);
  border-radius: var(--rayon);
  padding: var(--esp-4);
  text-align: center;
  position: relative;
}
.cta h2 { color: var(--c-blanc); }
.cta p { color: var(--c-gris); max-width: 40rem; margin: 0 auto var(--esp-3); }
.cta .btn-primaire { background: var(--c-primaire); color: var(--c-blanc); }
.cta .btn-primaire:hover { background: var(--c-primaire-fonce); }

/* Contenu éditorial markdown */
.prose { max-width: 46rem; }
.prose h2 { margin-top: var(--esp-3); font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.7rem); }
.prose h3 { margin-top: var(--esp-3); }
.prose ul { padding-left: 1.4rem; }
.prose li { margin-bottom: 0.4rem; }
.prose strong { font-weight: 700; color: var(--c-texte); }

/* ---------- Contact ---------- */
.contact-grille { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--esp-4); }
.coordonnees { background: var(--c-fond-doux); border: 1px solid var(--c-bordure); border-radius: var(--rayon); padding: var(--esp-3); }
.coordonnees h3 { color: var(--c-texte); }
.coordonnees p { margin-bottom: var(--esp-2); }
.formulaire { display: grid; gap: var(--esp-2); }
.formulaire label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-texte-doux);
  display: block;
  margin-bottom: 0.35rem;
}
.formulaire input, .formulaire textarea, .formulaire select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--c-bordure-2);
  border-radius: var(--rayon);
  font-family: var(--police);
  font-size: 1rem;
  background: var(--c-blanc);
}
.formulaire input:focus, .formulaire textarea:focus {
  outline: 2px solid var(--c-primaire);
  outline-offset: 0;
  border-color: var(--c-primaire);
}

/* ---------- Pied de page ---------- */
.pied {
  background: var(--c-sombre);
  color: var(--c-gris);
  padding: var(--esp-4) 0 var(--esp-3);
  margin-top: 0;
  font-size: 0.9375rem;
}
.pied-int { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--esp-4); }
.pied h4 {
  color: var(--c-blanc);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--esp-2);
}
.pied a { color: var(--c-gris); text-decoration: none; }
.pied a:hover { color: var(--c-blanc); }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 0.45rem; }
.pied-bas {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: var(--esp-3);
  padding-top: var(--esp-2);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--esp-2);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--c-gris);
}

/* ---------- Responsive ---------- */
@media (max-width: 62rem) {
  .hero-int, .bloc, .contact-grille { grid-template-columns: 1fr; }
  .bloc.inverse .bloc-image { order: 0; }
  .cartes, .cartes-4 { grid-template-columns: 1fr 1fr; }
  .chiffres { grid-template-columns: 1fr 1fr; }
  .chiffre { border-left: none; padding-left: 0; padding-right: 1.75rem; }
  .pied-int { grid-template-columns: 1fr; }

  .burger { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--c-blanc);
    border-bottom: 1px solid var(--c-bordure);
    padding: var(--esp-2) 2rem var(--esp-3);
    flex-direction: column;
    align-items: stretch;
  }
  .nav.ouvert { display: flex; }
  .nav ul { flex-direction: column; align-items: stretch; }
  .nav li { display: block; }
  .nav > ul > li > a { padding: 0.75rem 0; }
  .nav > ul > li.actif > a::after { left: 0; right: auto; width: 26px; }
  .sous-menu {
    display: flex;
    position: static;
    border: none;
    border-top: none;
    box-shadow: none;
    padding-left: var(--esp-2);
    min-width: 0;
  }
  /* Sur telephone, la liste des langues est toujours visible, sans bouton. */
  .langues { margin-left: 0; margin-top: var(--esp-2); flex-direction: column; align-items: stretch; }
  .langues-courante { display: none; }
  .langues-liste { display: flex; position: static; margin: 0; border: none; border-top: 1px solid var(--c-bordure); box-shadow: none; padding: var(--esp-2) 0 0; flex-direction: row; flex-wrap: wrap; gap: 0.25rem; }
}
@media (max-width: 34rem) {
  .cartes, .cartes-4, .chiffres { grid-template-columns: 1fr; }
  .hero { padding: var(--esp-4) 0; }
}

/* Sur telephone, la barre doit rester une barre : le logo se reduit. */
@media (max-width: 48rem) {
  :root { --hauteur-logo: 3.25rem; }
}

/* ==========================================================================
   Composants ajoutes le 14/09/2026 (modifications demandees par le marketing)
   ========================================================================== */

/* ---------- Diaporama du bandeau d'accueil ---------- */
/* Les photos sont empilees ; la premiere tient la place, les suivantes sont
   posees par-dessus et recadrees au meme format. Le fondu est une simple
   transition d'opacite pilotee par site.js. */
.hero-diaporama .diapo { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.hero-diaporama .diapo:first-child { position: relative; }
.hero-diaporama .diapo.visible { opacity: 1; }
.hero-diaporama .diapo img { aspect-ratio: 4 / 3; object-fit: cover; height: 100%; }
.hero-diaporama .diapo:first-child img { height: auto; }

/* ---------- Infographie des activites (accueil, « Notre histoire ») ---------- */
.activites {
  list-style: none;
  margin: 0;
  padding: 1.5rem 1rem 1.25rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  background: var(--c-sombre);
  border: 1px solid var(--c-bordure-2);
}
.activite { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.9rem; }
.activite-disque {
  width: 5.25rem;
  height: 5.25rem;
  border-radius: 50%;
  background: var(--c-blanc);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 6px var(--c-sombre), 0 0 0 9px rgba(255, 255, 255, 0.85), 0 0 0 15px var(--c-sombre), 0 0 0 17px rgba(255, 255, 255, 0.55);
  margin: 0.55rem 0 0.35rem;
}
.activite-disque img { width: 88%; height: 88%; border-radius: 50%; object-fit: cover; }
.activite-libelle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 4.5rem;
  padding: 0.5rem 0.4rem;
  background: var(--c-primaire);
  color: var(--c-blanc);
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1.25;
}
@media (max-width: 40rem) {
  .activites { grid-template-columns: repeat(3, 1fr); }
  .activite-disque { width: 4.5rem; height: 4.5rem; }
}

/* ---------- Cartouche de texte sur une image (carte du monde) ---------- */
/* Les quatre variables sont la position du cartouche dans l'image, en part de
   sa largeur et de sa hauteur. L'image porte un cadre de 11 px (bordure et
   marge interieure), d'ou les calculs. La taille du texte suit la largeur du
   bloc, jamais celle de la fenetre. */
.bloc-image.a-cartouche { container-type: inline-size; }
.bloc-image.a-cartouche .cartouche {
  --cx: 0.5894; --cy: 0.5989; --cw: 0.4106; --ch: 0.2665;
  position: absolute;
  left: calc(11px + (100% - 22px) * var(--cx));
  top: calc(11px + (100% - 22px) * var(--cy));
  width: calc((100% - 22px) * var(--cw));
  height: calc((100% - 22px) * var(--ch));
  display: flex;
  align-items: center;
  padding: 0 5%;
  color: var(--c-blanc);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
  font-size: clamp(0.62rem, 3.55cqw, 1.45rem);
}

/* ---------- Processus en etapes (page Engagements) ---------- */
.processus { border: 1px solid var(--c-bordure-2); background: var(--c-blanc); padding: 1.5rem 1.5rem 1.25rem; position: relative; }
.processus::before { content: ""; position: absolute; top: -1px; right: -1px; width: 22px; height: 22px; border-top: 2px solid var(--c-primaire); border-right: 2px solid var(--c-primaire); }
.processus-titre {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-primaire);
  margin-bottom: 1rem;
}
.processus-liste { list-style: none; margin: 0; padding: 0; counter-reset: etape; }
.processus-liste > * {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.62rem 0;
  border-top: 1px solid var(--c-bordure);
  position: relative;
}
.processus-liste > :first-child { border-top: none; }
.processus-num { font-family: var(--mono); font-weight: 600; font-size: 0.8rem; color: var(--c-primaire); }
.processus-libelle { font-weight: 600; color: var(--c-texte-2); font-size: 0.95rem; }

/* ---------- Volets depliants (alimentation animale) ---------- */
.section-volets { padding-top: 0; }
.volet { border: 1px solid var(--c-bordure-2); background: var(--c-blanc); margin-bottom: 0.75rem; }
.volet > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1.1rem 1.5rem;
  user-select: none;
}
.volet > summary::-webkit-details-marker { display: none; }
.volet > summary:hover { background: var(--c-fond-doux); }
.volet-titre { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; }
.volet-sous { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-gris); }
.volet-signe { margin-left: auto; width: 1.1rem; height: 1.1rem; position: relative; flex: none; align-self: center; }
.volet-signe::before, .volet-signe::after { content: ""; position: absolute; background: var(--c-primaire); left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; transition: transform 0.2s ease; }
.volet-signe::after { transform: rotate(90deg); }
.volet[open] > .volet-signe::after, .volet[open] > summary .volet-signe::after { transform: rotate(0); }
.volet-corps { padding: 0.25rem 1.5rem 1.5rem; border-top: 1px solid var(--c-bordure); }
.volet-intro { max-width: 46rem; padding-top: 1rem; }
.gamme {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--esp-2);
}
.produit { border: 1px solid var(--c-bordure); background: var(--c-fond-doux); display: flex; flex-direction: column; }
.produit-image { padding: 1rem; background: var(--c-blanc); }
.produit-image img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.produit-legende { padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.15rem; }
.produit-ref { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--c-primaire); text-transform: uppercase; }
.produit-nom { font-weight: 600; font-size: 0.9rem; color: var(--c-texte-2); }
@media (max-width: 62rem) { .gamme { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 40rem) { .gamme { grid-template-columns: repeat(2, 1fr); } .volet > summary { flex-wrap: wrap; } }

/* ---------- Bandeau catalogue ---------- */
.section-catalogue { padding-top: 0; }
.catalogue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  flex-wrap: wrap;
  padding: var(--esp-3);
  background: var(--c-fond-doux);
  border: 1px solid var(--c-bordure-2);
  border-left: 4px solid var(--c-primaire);
}
.catalogue h2 { font-size: var(--fs-h3); margin-bottom: 0.25rem; }
.catalogue p { margin: 0; color: var(--c-texte-doux); }

/* ---------- Sceau de certification dans un texte ---------- */
.sceau { float: right; width: 5.5rem; margin: 0 0 0.75rem 1.25rem; }

/* ---------- Actualites ---------- */
.section-titre-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-2); max-width: none; flex-wrap: wrap; }
.lien-flech { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.carte-date { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-gris); margin-bottom: 0.5rem; }
.vide { color: var(--c-texte-doux); font-style: italic; }

/* Le slogan sous le logo ne s'affiche que sur les ecrans larges : a cote de
   sept entrees de menu et cinq langues, il n'a plus la place ailleurs. */
@media (min-width: 90rem) { .logo-sous { display: block; } }

/* ---------- Menu : la page mere est visible dans sa liste (14/09) ---------- */
/* Un chevron signale qu'une entree ouvre une liste, et la liste commence par
   la page mere elle-meme, separee des sous-pages : sans cela, « Nos missions »
   passait pour un simple titre de dossier alors que c'est une page. */
.chevron {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-left: 0.45rem;
  margin-bottom: 0.15rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.nav li:hover > a > .chevron, .nav li:focus-within > a > .chevron { transform: rotate(225deg); margin-bottom: -0.1rem; opacity: 1; }
.sous-menu-mere {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.75rem 0.875rem 0.85rem;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--c-bordure);
}
.sous-menu-mere-kicker {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gris);
}
.sous-menu-mere-libelle { font-weight: 700; font-size: 0.875rem; color: var(--c-texte); }
.sous-menu-mere:hover .sous-menu-mere-libelle { color: var(--c-primaire); }
@media (max-width: 62rem) {
  .chevron { display: none; }
  .sous-menu-mere { padding-left: 0; border-bottom: none; margin-bottom: 0; }
}

/* ---------- Reseaux sociaux dans le pied de page ---------- */
.pied-reseaux-titre { margin-top: var(--esp-3); }
.reseaux { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.reseaux li { margin: 0; }
.reseaux a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--c-gris);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.reseaux a:hover { color: var(--c-blanc); border-color: var(--c-blanc); }
.actualite-actions { margin-top: var(--esp-3); display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ==========================================================================
   Adaptations WordPress
   ========================================================================== */

/* En-tête collant : l'enveloppe de la partie de modèle ne doit pas le contenir. */
.spcv-zone-entete, .spcv-zone-pied { display: contents; }
.admin-bar .entete { top: 32px; }
@media (max-width: 782px) { .admin-bar .entete { top: 46px; } }
@media (max-width: 600px) { .admin-bar .entete { top: 0; } }

/* Cartes : tout le bloc reste cliquable (le lien « Découvrir → » s'étend à la carte). */
.carte { position: relative; }
.carte .carte-lien a { color: inherit; }
.carte .carte-lien a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.carte .carte-lien a:focus-visible { outline: none; }
.carte:has(.carte-lien a:focus-visible) { outline: 2px solid var(--c-primaire); outline-offset: 2px; }
.cartes > .wp-block-group.carte { margin: 0; }

/* Boutons (blocs « Bouton », styles Primaire / Secondaire). */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.875rem; align-items: center; }
.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.94rem 1.625rem;
  border-radius: var(--rayon);
  font-family: var(--police);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: var(--interligne);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.wp-block-button.is-style-primaire .wp-block-button__link,
.wp-block-button:not([class*="is-style-"]) .wp-block-button__link { background: var(--c-primaire); color: var(--c-blanc); }
.wp-block-button.is-style-primaire .wp-block-button__link:hover,
.wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover { background: var(--c-primaire-fonce); color: var(--c-blanc); }
.wp-block-button.is-style-primaire .wp-block-button__link::after { content: "→"; font-family: var(--mono); }
.wp-block-button.is-style-secondaire .wp-block-button__link { background: transparent; color: var(--c-texte); box-shadow: inset 0 0 0 1.5px var(--c-bordure-2); }
.wp-block-button.is-style-secondaire .wp-block-button__link:hover { background: var(--c-texte); color: var(--c-blanc); box-shadow: inset 0 0 0 1.5px var(--c-texte); }
.cta .wp-block-buttons { justify-content: center; }
.catalogue .wp-block-buttons { flex: none; }

/* Volets dépliants (bloc « Détails ») : le signe +/− est dessiné en CSS. */
.volet > summary::after {
  content: "";
  margin-left: auto;
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  align-self: center;
  background:
    linear-gradient(var(--c-primaire), var(--c-primaire)) center / 100% 2px no-repeat,
    linear-gradient(var(--c-primaire), var(--c-primaire)) center / 2px 100% no-repeat;
  transition: background-size 0.2s ease;
}
.volet[open] > summary::after { background-size: 100% 2px, 2px 0; }
.volet > summary .volet-titre { color: var(--c-texte); }

/* Groupes qui remplacent des listes (gamme de produits, activités, processus). */
.produit-legende { gap: 0.15rem; }
.produit-image { padding: 1rem; background: var(--c-blanc); }
.chiffre .valeur { margin: 0; }

/* Listes : le thème parent ajoute un espace au-dessus de chaque puce. */
.wp-block-list li { margin-top: 0; }

/* Sceau de certification dans un texte. */
figure.wp-block-image.sceau { float: right; width: 5.5rem; margin: 0 0 0.75rem 1.25rem; }
figure.sceau img { width: 100%; }

/* Images de bloc : le cadre « planche technique » porte sur l'image, pas sur la figure. */
.bloc-image.wp-block-image { position: relative; }

/* Contact : coordonnées espacées, formulaire Contact Form 7. */
.contact-grille .coordonnees { margin-bottom: 1.5rem; }
.wpcf7 .formulaire, .wpcf7 form.formulaire { display: grid; gap: var(--esp-2); }
.formulaire .wpcf7-form-control-wrap { display: block; }
.formulaire input[type="submit"] { width: auto; justify-self: start; border: 0; cursor: pointer; font-family: var(--police); }
.formulaire .btn-primaire { background: var(--c-primaire); color: var(--c-blanc); }
.formulaire .btn-primaire:hover { background: var(--c-primaire-fonce); }
.formulaire .mention-rgpd { font-size: var(--fs-petit); color: var(--c-texte-doux); line-height: 1.5; margin: 0; }
.formulaire .wpcf7-not-valid-tip { color: var(--c-primaire); font-size: var(--fs-petit); margin-top: 0.25rem; }
.formulaire .wpcf7-not-valid { border-color: var(--c-primaire); }
.wpcf7 form .wpcf7-response-output { margin: 0; padding: 0.75rem 1rem; border: 1px solid var(--c-bordure-2); border-left: 4px solid var(--c-primaire); }
.wpcf7 form.sent .wpcf7-response-output { border-left-color: #2e7d32; }
.wpcf7-spinner { margin: 0 0 0 0.75rem; }
.screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Éditeur : rendre visibles les blocs vides et les codes courts. */
.editor-styles-wrapper .wp-block-shortcode { font-family: var(--mono); font-size: 0.8rem; }