/* Échafaudage de mise en page du prototype : remise à zéro, sections, conteneur,
   en-tête, grille des logos, cartes comparatives, pied de page. Partagé par toutes
   les pages du prototype. Ce CSS est jetable : il disparaît quand GeneratePress et
   theme.json prennent le relais. Chargé APRÈS tokens.css et components.css — les
   règles de remise à zéro ciblent des éléments (0,0,1) et perdent toujours contre
   les classes de composants (0,1,0) ; les classes ajoutées ici sont préfixées et
   n'entrent en collision avec aucune classe de components.css, sauf là où
   l'emporter est justement l'intention. */

/* --- Remise à zéro minimale ------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

body,
h1, h2, h3,
p, figure, blockquote,
ul, li { margin: 0; padding: 0; }

ul[class] { list-style: none; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--msg-white);
  color: var(--msg-green);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.6;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

/* Le mouvement n'est jamais imposé. Miroir de la règle de components.css. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Utilitaires -------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  z-index: 10;
  top: 0;
  left: var(--gutter);
  padding: calc(var(--fs-body) * 0.6) calc(var(--fs-body) * 1.2);
  background: var(--msg-green);
  color: var(--msg-white);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-150%);
}

/* Pas de transition : le lien doit être visible à la première tabulation. */
.skip-link:focus {
  outline: 3px solid var(--msg-green);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--msg-white);
  transform: translateY(0);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Sections ----------------------------------------------------------- */
/* La vague est fille directe de la section pour rester en pleine largeur et
   au-dessus du rembourrage. Le rembourrage vit sur `__body`, jamais sur la
   section elle-même. */
.section { position: relative; }
.section__body { padding-block: var(--space-section); }
.section__body--tight { padding-block: calc(var(--space-section) * 0.4); }

.section--white { background: var(--msg-white); color: var(--msg-green); }
.section--grey { background: var(--msg-grey); color: var(--msg-green); }
.section--sage { background: var(--msg-sage); color: var(--msg-green); }
/* La maquette ouvre cette section par un dôme, pas par une vague. Un arrondi sur
   la section laissait voir le fond blanc de la page dans les coins, faux dès que
   la section précédente est grise : le dôme est donc peint — une bande en haut,
   couleur de la section précédente hors de l'ellipse, sauge dedans. */
.section--sage { --fond-avant: var(--msg-white); position: relative; }
.section--sage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 140px;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, var(--msg-sage) 99.2%, var(--fond-avant) 100%);
}
.section--sage > .container { position: relative; }
.section--sage.section--apres-gris { --fond-avant: var(--msg-grey); }
.section--green { background: var(--msg-green); color: var(--msg-white); }


/* --- Titres ------------------------------------------------------------- */
/* Ces règles de page sont des valeurs par défaut, pas des ordres : elles sont
   enveloppées dans :where() pour ne peser aucune spécificité, sinon un titre
   placé dans un composant capte la couleur de sa section et écrase celle du
   composant. Vécu ici même — en promouvant les tags des cartes services de h3
   à h2 pour supprimer un niveau sauté, ils ont pris le sauge de
   `.section--green h2` (0-1-1) par-dessus le blanc de `.card__tag` (0-1-0),
   soit sauge sur corail à 2.38. Avec :where(), le composant gagne toujours. */
:where(h1, h2), .title--display {
  font-family: var(--ff-display);
  font-weight: 400;
  line-height: 1.1;
}

:where(h1) { font-size: var(--fs-h1); }
:where(h2) { font-size: var(--fs-h2); }

/* Règle de contraste du design system, appliquée par contexte de fond et non
   au cas par cas : le sauge ne sert de couleur de texte que sur le vert. */
:where(.section--green h1, .section--green h2) { color: var(--msg-sage); }

:where(.section--white h2, .section--grey h2) { color: var(--msg-sage-dark); }

/* Deux titres de la maquette sont en vert profond plutôt qu'en sauge foncé. */
.title--green { color: var(--msg-green); }

/* « Un projet en tête ? » n'est pas composé en display dans la maquette. */
.title--plain {
  font-family: var(--ff-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--msg-green);
}

.section__heading { text-align: center; }

/* --- Textes ------------------------------------------------------------- */
.lead {
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.4;
}

.statement {
  font-family: var(--ff-heading);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.4;
}

.section--green .statement--accent { color: var(--msg-sage); }

.eyebrow {
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.text-center { text-align: center; }

.mt-section { margin-top: var(--space-section); }
.mt-gutter { margin-top: var(--gutter); }

.prose > * + * { margin-top: calc(var(--fs-body) * 1.2); }

.stack { display: grid; gap: calc(var(--gutter) * 0.75); justify-items: start; }
.stack--center { justify-items: center; text-align: center; }

/* --- Réserves d'image ---------------------------------------------------
   Aucun visuel n'existe. Chaque bloc réserve exactement la place que prendra
   la vraie image, par `aspect-ratio` : le CLS mesuré reste honnête. Le fond
   blanc et le filet tireté verts se lisent comme une réserve assumée, et
   portent leur propre contraste (9.15) quel que soit le fond de section. */
.ph {
  display: grid;
  place-items: center;
  padding: calc(var(--gutter) * 0.5);
  border: 2px dashed var(--msg-green);
  background: var(--msg-white);
  color: var(--msg-green);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}

.hero-image { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 715; }
/* Le cadre arrondi de la maquette, autour de la planche de charte. */
.showcase { margin-inline: auto; max-width: 1200px; border-radius: 40px; overflow: hidden; }
.showcase img { display: block; width: 100%; height: auto; }

/* Dans un `.card__frame` la réserve hérite du rayon et du ratio du cadre. */
.card__frame .ph { aspect-ratio: auto; border-radius: inherit; }

/* --- En-tête ------------------------------------------------------------ */
.site-header { background: var(--msg-white); }

.nav__logo-img {
  display: block;
  height: clamp(4rem, 7.5vw, 9rem);
  width: auto;
}

.hero-visual { background: var(--msg-white); color: var(--msg-green); }

/* Pleine largeur, comme l'illustration de la maquette : la figure est hors du
   conteneur, touche les bords, et la vague vient directement dessous. */
.hero-figure { margin: 0; max-width: none; padding-block: calc(var(--space-section) * 0.4) 0; }

/* --- Références clients -------------------------------------------------- */
.logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: calc(var(--gutter) * 0.5);
  margin-top: calc(var(--gutter) * 1.5);
  margin-inline: auto;
  max-width: 1280px;
  padding: 0;
  list-style: none;
}

/* Tuiles de la maquette : un carré blanc, un filet vert, un rayon de 12 px. */
.logos li {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 1rem;
  border: 1px solid var(--msg-green);
  border-radius: 12px;
  background: var(--msg-white);
}

/* Une boîte commune à tous les logos. Sans elle, un logo large écrase un logo
   compact et la ligne du mur part dans tous les sens : object-fit conserve les
   proportions de chacun à l'intérieur de la même boîte. */
.logos img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 64px;
  object-fit: contain;
}

/* --- Comparatif Sans / Avec ---------------------------------------------- */
.compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  margin-top: var(--space-section);
}

@media (min-width: 768px) {
  .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.compare__panel {
  padding: var(--gutter);
  border-radius: 40px;
  background: var(--msg-grey);
  color: var(--msg-green);
}

.compare__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.1;
  color: var(--msg-green);
}

.compare__list {
  display: grid;
  gap: calc(var(--fs-body) * 0.6);
  margin-top: calc(var(--gutter) * 0.75);
  font-size: var(--fs-lead);
}

.compare__list li {
  display: flex;
  gap: 0.5em;
  align-items: baseline;
}

.compare__mark { flex: none; }

/* --- Pied de page --------------------------------------------------------- */
.site-footer { position: relative; background: var(--msg-green); color: var(--msg-white); }
/* Le portrait de « Un projet en tête ? » passe derrière la vague du pied de page. */
.site-footer.section--devant {
  --devant-fond: var(--msg-green);
  background: linear-gradient(to bottom, transparent var(--wave-height), var(--devant-fond) var(--wave-height));
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-section);
  align-items: start;
}

@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1.1fr 0.8fr 1fr; gap: var(--gutter); }
}

.footer-nav {
  display: grid;
  gap: calc(var(--fs-body) * 0.7);
  font-family: var(--ff-heading);
  font-size: var(--fs-lead);
  font-weight: 700;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.footer-nav a:hover { text-decoration: underline; }

.footer-nav a:focus-visible,
.footer-social a:focus-visible {
  outline: 3px solid var(--msg-white);
  outline-offset: 2px;
}

.footer-social {
  display: flex;
  gap: calc(var(--gutter) * 0.5);
  margin-bottom: var(--gutter);
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--msg-white);
  border-radius: 14px;
  font-weight: 700;
  text-decoration: none;
}

.footer-signature { color: var(--msg-sage); font-family: var(--ff-heading); font-weight: 700; }

.footer-logo-img {
  display: block;
  height: clamp(5rem, 8vw, 7rem);
  width: auto;
}

/* Les réserves d'image du pied de page reprennent le filet blanc : le vert
   profond du socle `.ph` s'y perdrait. */
.site-footer .ph {
  border-color: var(--msg-white);
  background: transparent;
  color: var(--msg-white);
}

/* --- Le sauge n'est jamais du texte sur fond clair, mais le texte des
   cartes projet doit passer au blanc sur les sections vertes. ------------- */
.section--green .card__caption { color: var(--msg-white); }

/* =========================================================================
   Gabarit « page de prestation » (maquettes 2 et 3), ajouté le 9 octobre 2026
   ========================================================================= */

/* Le bandeau de la maquette 2 est un peu plus haut que celui de l'accueil. */
.hero-image--identite { aspect-ratio: 1920 / 750; }

/* Un paragraphe centré, à la mesure de la maquette : jamais plus de 70 caractères. */
.prose--centre { max-width: 70ch; margin-inline: auto; text-align: center; }
.section__heading .lead { font-weight: 500; }

/* Une mention à compléter après l'atelier : visible, mais pas trompeuse. */
.note-atelier { font-style: italic; color: var(--msg-sage-dark); }

/* --- Frise des composantes (maquette 2) ---------------------------------
   Six entrées en alternance de part et d'autre d'un fil vertical, une pastille
   sur le fil, un visuel rond en face du texte. Sous 768 px : une colonne, sans
   fil ni visuel. */
.frise { position: relative; max-width: 1100px; margin-inline: auto; padding: 0; list-style: none; }
.frise__item { display: grid; row-gap: calc(var(--gutter) * 0.5); }
.frise__item + .frise__item { margin-top: calc(var(--gutter) * 1.25); }
.frise__visuel { display: none; }
.frise__texte h3 { font-family: var(--ff-heading); font-size: var(--fs-lead); font-weight: 700; color: var(--msg-green); }
.frise__texte p { margin-top: 0.5em; }

@media (min-width: 768px) {
  .frise::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: var(--msg-grey);
  }
  .frise__item {
    position: relative;
    grid-template-columns: 1fr 1fr;
    column-gap: calc(var(--gutter) * 1.5);
    align-items: center;
  }
  .frise__item + .frise__item { margin-top: calc(var(--gutter) * 0.75); }
  .frise__item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: var(--msg-green);
  }
  .frise__visuel { display: flex; }
  .frise__item:nth-child(odd) .frise__visuel { order: 1; justify-content: flex-end; }
  .frise__item:nth-child(odd) .frise__texte { order: 2; }
  .frise__item:nth-child(even) .frise__visuel { justify-content: flex-start; }
  .frise__item:nth-child(even) .frise__texte { text-align: right; }
}

/* Réserve ronde : la maquette montre un disque gris en attendant le visuel. */
.ph--rond {
  width: min(220px, 70%);
  aspect-ratio: 1;
  border-radius: 50%;
  border-style: solid;
  border-color: var(--msg-grey);
  background: var(--msg-grey);
  text-align: center;
}

/* --- Deux voies : logo seul / identité complète --------------------------- */
.voies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--gutter);
  max-width: 1100px;
  margin-inline: auto;
}
.voies__panel { padding: var(--gutter); border-radius: 40px; background: var(--msg-white); }
.voies__titre { font-family: var(--ff-heading); font-size: var(--fs-lead); font-weight: 700; color: var(--msg-green); margin-bottom: 0.5em; }

/* --- Quatre étapes ------------------------------------------------------ */
.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--gutter);
  padding: 0;
  list-style: none;
}
.etapes__num { display: block; font-family: var(--ff-display); font-size: var(--fs-h2); line-height: 1; color: var(--msg-sage-dark); }
.etapes__titre { font-family: var(--ff-heading); font-size: var(--fs-lead); font-weight: 700; color: var(--msg-green); margin-top: 0.4em; }
.etapes__item p { margin-top: 0.5em; }

/* --- Encoche : la maquette ouvre les sections grises par une petite échancrure
   blanche au centre, pas par une vague. */
.section--encoche { position: relative; }
.section--encoche::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(120px, 12vw, 200px);
  height: clamp(24px, 2.4vw, 40px);
  transform: translateX(-50%);
  border-radius: 0 0 999px 999px;
  background: var(--msg-white);
}

/* --- FAQ (maquette) : lignes sauge, chevron corail, une réponse à la fois ---- */
.faq { max-width: 1100px; margin-inline: auto; }
.faq__item { margin-top: 0.6rem; border-radius: 10px; background: var(--msg-sage); color: var(--msg-green); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.1rem;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { font-family: var(--ff-heading); font-size: var(--fs-body); font-weight: 600; color: inherit; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--msg-coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 60% no-repeat;
  transition: transform 0.2s;
}
.faq__item[open] summary::after { transform: rotate(180deg); }
.faq__item summary:focus-visible { outline: 3px solid var(--msg-green); outline-offset: 2px; }
.faq__reponse { padding: 0 1.1rem 1.1rem; }

/* --- Deux cartes côte à côte, plus larges que celles de la grille de neuf ---- */
.card-grid--deux { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); max-width: 1100px; margin-inline: auto; }

/* Les visuels ronds de la frise : extraits carrés de la charte, arrondis ici. */
.frise__image {
  display: block;
  width: clamp(160px, 16vw, 300px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 6px var(--msg-white), 0 0 0 7px var(--msg-grey);
}

/* =========================================================================
   Gabarit « liste des réalisations » (maquette 4), ajouté le 9 octobre 2026
   ========================================================================= */

/* Filtre par famille : des pilules claires sur le vert, l'active en sauge. */
.filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.filtres__item {
  padding: 0.45em 1.1em;
  border: 1px solid var(--msg-sage);
  border-radius: var(--pill-radius);
  color: var(--msg-white);
  font-family: var(--ff-heading);
  font-size: var(--fs-caption);
  font-weight: 600;
  text-decoration: none;
}
.filtres__item:hover { background: rgba(255, 255, 255, 0.12); }
.filtres__item--actif { background: var(--msg-sage); color: var(--msg-green); }
.filtres__item:focus-visible { outline: 3px solid var(--msg-white); outline-offset: 2px; }

/* La galerie de la maquette : chaque projet est une grande image au coin
   arrondi, son étiquette et sa phrase à côté, en quinconce d'un projet à
   l'autre. Sous 768 px : image puis texte, en colonne. */
.galerie { max-width: 1400px; margin-inline: auto; padding: 0; list-style: none; }
.galerie__item { display: grid; row-gap: var(--gutter); }
.galerie__item + .galerie__item { margin-top: calc(var(--space-section) * 0.8); }
.galerie__figure { display: block; border-radius: 40px; overflow: hidden; background: var(--msg-white); }
.galerie__figure:focus-visible { outline: 4px solid var(--msg-sage); outline-offset: 4px; }
/* Une affiche très haute (l'affiche SMAVD fait 1,8 fois sa largeur) prendrait
   deux écrans : on la borne, recadrée par le haut. */
.galerie__image { display: block; width: 100%; height: auto; max-height: 1000px; object-fit: cover; object-position: center top; }
.galerie__texte { text-align: center; }
.galerie__famille { margin: 0; }
.pill--etiquette { font-size: var(--fs-caption); padding: 0.45em 1.2em; }
.galerie__titre { margin-top: 0.8em; font-family: var(--ff-heading); font-size: var(--fs-lead); font-weight: 700; }
.galerie__titre a { color: inherit; text-decoration: none; }
.galerie__titre a:hover { text-decoration: underline; }
.galerie__texte p:last-child { margin-top: 0.6em; max-width: 36ch; margin-inline: auto; }

@media (min-width: 768px) {
  .galerie__item { grid-template-columns: 3fr 2fr; column-gap: var(--gutter); align-items: center; }
  .galerie__item:nth-child(even) .galerie__figure { order: 2; }
  .galerie__item:nth-child(even) .galerie__texte { order: 1; }
  .galerie__figure { max-width: 900px; }
  .galerie__item:nth-child(even) .galerie__figure { justify-self: end; }
}

/* =========================================================================
   Gabarit « fiche réalisation » (sans maquette), ajouté le 10 octobre 2026
   ========================================================================= */

/* Fil d'Ariane : une ligne discrète au-dessus du titre. */
.fil { font-size: var(--fs-caption); }
.fil__liste { display: flex; flex-wrap: wrap; gap: 0.35em; margin: 0; padding: 0; list-style: none; }
.fil__liste li + li::before { content: "›"; margin-right: 0.35em; opacity: 0.7; }
.fil a { color: inherit; }

/* En-tête du projet : titre et fiche à gauche, visuel principal à droite. */
.projet-entete { display: grid; gap: var(--gutter); }
.projet-visuel { margin: 0; border-radius: 40px; overflow: hidden; background: var(--msg-white); }
/* Hauteur fixée, pas seulement bornée : avec une simple borne, la largeur se
   déduisait de la hauteur et l'affiche ne remplissait plus sa colonne. */
.projet-visuel img { display: block; width: 100%; height: clamp(420px, 78vh, 900px); object-fit: cover; object-position: center top; }
@media (min-width: 768px) {
  .projet-entete { grid-template-columns: 1.1fr 0.9fr; align-items: center; column-gap: calc(var(--gutter) * 1.5); }
}

/* La fiche projet : une liste de définitions sur deux colonnes, non rédigée. */
.fiche { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.2rem; margin: 0; font-size: var(--fs-caption); }
.fiche dt { font-family: var(--ff-heading); font-weight: 700; color: var(--msg-sage); }
.fiche dd { margin: 0; }

/* Un récit se lit sur une colonne étroite, alignée à gauche. */
.prose--lecture { max-width: 70ch; margin-inline: auto; }
.livrables { max-width: 70ch; margin-inline: auto; padding-left: 1.2em; }
.livrables li + li { margin-top: 0.5em; }

/* Les mascottes, chacune sur une tuile blanche. */
.mascottes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--gutter);
  max-width: 1100px;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}
.mascottes figure { display: grid; place-items: center; margin: 0; padding: var(--gutter); border-radius: 40px; background: var(--msg-white); }
.mascottes img { display: block; width: 100%; max-width: 260px; height: auto; }

/* Deux visuels côte à côte, le principal plus large, chacun légendé. */
.media-duo { display: grid; gap: var(--gutter); max-width: 1400px; margin-inline: auto; }
.media-duo figure { margin: 0; }
.media-duo .cadre { border-radius: 40px; overflow: hidden; }
.media-duo img { display: block; width: 100%; height: auto; }
.media-duo figcaption { margin-top: 0.6rem; font-size: var(--fs-caption); text-align: center; }
@media (min-width: 768px) {
  .media-duo { grid-template-columns: 2fr 1fr; align-items: start; }
}

/* Le projet voisin : une carte seule, centrée. */
.suite { max-width: 380px; margin-inline: auto; }
.suite .card__frame { display: block; color: inherit; text-decoration: none; }

/* Le titre d'une fiche est long (prestation, client, secteur) : à la taille des
   H2, il tient sur deux ou trois lignes au lieu de cinq. */
.projet-entete h1 { font-size: var(--fs-h2); }

/* =========================================================================
   Gabarit « page texte » (Qui suis-je, sans maquette), ajouté le 10 octobre 2026
   ========================================================================= */

/* Les mêmes panneaux que « logo seul / identité complète », mais sur blanc :
   ils passent au gris, et par trois. */
.voies__panel--gris { background: var(--msg-grey); }
.voies--trois { max-width: 1400px; }

/* Dans un bloc à photo, les H3 d'un parcours reprennent la taille des titres de
   panneau, pas celle des H3 de section. */
.cutout__body .voies__titre { margin-top: 0.4em; margin-bottom: 0; }

/* Une photo carrée dans un bloc à photo garde ses coins arrondis et ne déborde
   pas de la section : pas de marge négative pour elle. */
.cutout__figure--posee { margin-top: 0; margin-bottom: 0; }