/* =============================================================
   d3m41n, feuille de style unique du site v1
   Palette : noir, blanc, gris de mention uniquement (ADR-020)
   Typographie : deux familles systeme, zero webfont (ADR-018)
   Effet unique des pages courantes : inversion noir et blanc
   au survol (ADR-019). Le contour anime de la 404 et la regle
   prefers-reduced-motion arrivent a l'etape 6.

   Mise en page : deux niveaux de largeur. --large borne les
   sections elles-memes, la page utilise vraiment l'ecran.
   --mesure borne les paragraphes de lecture a l'interieur : un
   paragraphe de plusieurs lignes reste illisible etire sur un
   ecran large. Le hero casse la colonne unique avec une grille
   texte/photo. L'en-tete et le pied de page partagent la meme
   logique : signature a gauche, logo a droite.
   ============================================================= */

/* --- 1. Jetons ----------------------------------------------- */

:root {
  --noir: #000;
  --blanc: #fff;
  --gris: #666;

  --titres: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --corps: Georgia, "Times New Roman", Times, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;

  --large: 90rem;
  --mesure: 34rem;
  --filet: 3px;
}

/* --- 2. Bases ------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--corps);
  font-size: 1.0625rem;
  line-height: 1.65;
}

@media (min-width: 40em) {
  body { font-size: 1.125rem; }
}

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

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* --- 3. Voix typographiques ---------------------------------- */

h1, h2, h3,
.signature,
.surtitre,
.punchline,
.preuve-nom,
.bouton,
.navigation a,
.lien-offre {
  font-family: var(--titres);
  font-weight: 900;
  font-synthesis: none;
  font-synthesis-weight: none;
}

h1, h2, h3 {
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0 0 0.55em;
}

h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); letter-spacing: -0.01em; }

.mention,
.preuve-mission {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--gris);
}

/* Ligne "par mail" sous le formulaire de /contact : espace
   supplementaire par rapport au bouton "Envoyer" juste au-dessus,
   meme valeur que .action pour rester sur l'echelle existante. */
.formulaire + .mention { margin-top: 1.8rem; }

/* --- 4. Liens et inversion au survol -------------------------- */

a {
  color: var(--noir);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover,
a:focus-visible {
  background: var(--noir);
  color: var(--blanc);
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid var(--noir);
  outline-offset: 2px;
}

/* ADR-064 (2026-09-07) supersede ADR-019 : le bouton d'appel a
   l'action porte desormais une animation (ombre portee qui
   s'aplatit au survol et au clic, effet "touche de clavier").
   Genere sur les 5 pages. Version precedente conservee ci-dessous
   en commentaire pour un retour en arriere en une passe : il
   suffit de supprimer le bloc actif et de decommenter celui-ci.

.bouton {
  display: inline-block;
  font-size: 1rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
  padding: 0.85em 1.6em;
  background: var(--noir);
  color: var(--blanc);
  border: var(--filet) solid var(--noir);
  text-decoration: none;
}

.bouton:hover,
.bouton:focus-visible {
  background: var(--blanc);
  color: var(--noir);
}
*/

.bouton {
  display: inline-block;
  font-size: 1rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
  padding: 0.85em 1.6em;
  background: var(--blanc);
  color: var(--noir);
  border: var(--filet) solid var(--noir);
  text-decoration: none;
  box-shadow: 6px 6px 0 var(--noir);
  transition: box-shadow 0.1s ease, transform 0.1s ease, background 0.1s ease, color 0.1s ease;
}

.bouton:hover,
.bouton:focus-visible {
  background: var(--blanc);
  color: var(--noir);
  box-shadow: 3px 3px 0 var(--noir);
  transform: translate(3px, 3px);
}

/* Retour de Simon : l'effet "touche de clavier" ne se sentait pas
   assez, surtout au toucher (mobile, ou :hover ne se declenche
   jamais). Ombre portee agrandie au repos (6px, etait 4px) pour
   creuser davantage a l'appui, et :active inverse maintenant aussi
   le fond/texte (comme une touche qui s'enfonce et change de
   teinte), pas seulement l'ombre et le translate. */
.bouton:active {
  background: var(--noir);
  color: var(--blanc);
  box-shadow: 0 0 0 var(--noir);
  transform: translate(6px, 6px);
}

/* Sous 30rem (environ 480px, en dessous de la plupart des
   telephones), "Reserver 30 minutes" ne tient plus sur une ligne
   au padding et a la taille de police standard : le texte revenait
   a la ligne au milieu d'un mot, coupure disgracieuse sur un
   composant a bord net et ombre portee. white-space: nowrap force
   le bouton a rester sur une ligne ; le padding horizontal est
   reduit en compensation pour limiter le debordement sur les
   ecrans les plus etroits. .formulaire .bouton (deja en
   width: 100%, texte centre) n'est pas concerne par ce
   comportement, seul le bouton libre du hero/CTA l'est. */
@media (max-width: 30rem) {
  .bouton {
    white-space: nowrap;
    padding-left: 1.1em;
    padding-right: 1.1em;
  }

  .formulaire .bouton {
    white-space: normal;
  }
}

/* Navigation precedent/suivant : deux .bouton fixes sur les bords
   de l'ecran, meme composant et meme effet ressort que le bouton
   principal (ADR a documenter). Cercle plutot que le padding
   rectangulaire de .bouton, icone fleche en fond au lieu de texte. */
.bouton-nav {
  position: fixed;
  bottom: 1.5rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  opacity: 1;
  transition: box-shadow 0.1s ease, transform 0.1s ease, opacity 0.4s ease;
}

.bouton-nav:hover,
.bouton-nav:focus-visible {
  transform: translate(2px, 2px);
}

.bouton-nav:active {
  transform: translate(4px, 4px);
}

.bouton-nav--precedent { left: 1.5rem; }
.bouton-nav--suivant { right: 1.5rem; }

.bouton-nav svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
}

/* DESACTIVE a la demande de Simon (2026-09-16) : les fleches sont
   visibles d'emblee sur toutes les pages, y compris avant le hero.
   Effet d'apparition au scroll conserve ici en reserve, a
   reactiver en decommentant ce bloc + en reposant la classe
   .bouton-nav--masquee dans le HTML des pages a hero + en
   reactivant le script de scroll (actuellement neutralise, voir
   footer de index.html / construire / transmettre).
.bouton-nav--masquee {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
*/

/* Sous 60rem de large, les fleches fixes empieteraient sur la
   colonne de texte (.mesure--large fait 40rem) : masquees, la
   navigation clavier/lien de pied de page reste disponible. */
@media (max-width: 60rem) {
  .bouton-nav { display: none; }
}

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
}

.lien-evitement:focus {
  position: static;
  display: block;
  padding: 0.6rem 1.25rem;
  background: var(--noir);
  color: var(--blanc);
  text-decoration: none;
}

/* --- 5. Gabarit --------------------------------------------- */

.entete,
.section,
.pied {
  max-width: var(--large);
  margin-left: auto;
  margin-right: auto;
  padding-left: 6rem;
  padding-right: 6rem;
}

.section {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

/* Mobile : le padding lateral fixe de 6rem (pense pour desktop)
   mange plus de la moitie de la largeur d'un ecran de telephone.
   Seuil 50rem, coherent avec les autres breakpoints a 2 colonnes
   du fichier. Le padding vertical des sections est resserre en
   meme temps, sinon les filets de separation (.section + .section)
   laissent des blocs de blanc disproportionnes en defilement mobile.
   Ne touche que .entete/.section/.pied : aucune regle desktop
   existante n'est modifiee, seule une nouvelle regle sous ce seuil
   s'ajoute. */
@media (max-width: 50rem) {
  .entete,
  .section,
  .pied {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

.section + .section { border-top: 1px solid var(--noir); }

.mesure { max-width: var(--mesure); }

/* Colonne de lecture centree sur la page, texte au fer a gauche.
   Employe sur le manifeste : une page de texte long sans hero ni
   image laisse un vide a droite si la colonne reste collee au bord.
   Le centrage ne touche pas l'alignement des lignes. */

.mesure--centree {
  margin-left: auto;
  margin-right: auto;
}

/* Colonne elargie de 34rem a 40rem, reservee aux pages de texte
   long. La mesure standard tient environ 60 signes par ligne,
   celle-ci environ 70 : toujours dans la plage de lecture
   confortable (45 a 75), mais la page raccourcit d'environ 15%.
   Ne pas depasser 42rem, au-dela l'oeil perd le retour a la ligne. */

.mesure--large { max-width: 40rem; }

.action { margin-top: 1.8rem; }

/* padding-top passe de 1.5rem a 4rem le 11 aout 2026 : l'en-tete
   se termine sans marge basse propre, le hero se collait a la
   navigation. Regle unique, l'ecart vaut pour les quatre pages. */
.section--ouverture { padding-top: 4rem; padding-bottom: 4.5rem; }

/* Sous 50rem, le menu est referme par defaut derriere le bouton
   burger (section 6b) : le risque de collision avec la navigation
   qui justifiait les 4rem le 11 aout ne s'applique plus de la meme
   facon, .navigation n'occupant de la place que quand elle est
   ouverte. Demande de Simon : reduire l'espace entre le bouton
   burger et la photo du hero sur mobile, sur toutes les pages qui
   en ont une. */
@media (max-width: 50rem) {
  .section--ouverture { padding-top: 2rem; }
}
.section--conversion {
  padding-top: 6rem;
  padding-bottom: 6.5rem;
  text-align: center;
}
/* Largeur du paragraphe portee a 40rem au lieu de 34rem (--mesure),
   a la demande de Simon. Reprend la valeur de .mesure--large deja
   definie plus haut dans le fichier plutot que d'inventer un chiffre. */
.section--conversion .mesure { max-width: 40rem; margin: 0 auto; }
.section--conversion h2 { max-width: 24ch; margin-left: auto; margin-right: auto; }

/* Sous 30rem, 24ch de large combines a la taille de police mobile
   du h2 (clamp, section 3) ne laisse plus que 2-3 mots par ligne :
   la contrainte de largeur, pensee pour garder un titre compact et
   centre sur desktop, devient contre-productive quand l'ecran est
   deja etroit. Neutralisee ici plutot que dans .h2--pleine-largeur
   (classe HTML volontairement posee au cas par cas) pour que
   l'effet soit automatique, sans repasser sur chaque page. */
@media (max-width: 30rem) {
  .section--conversion h2 { max-width: none; }
}

/* Classe utilitaire nouvelle : neutralise le max-width: 24ch
   ci-dessus pour un titre court qui doit tenir sur une ligne
   (ex. la home, "Echangeons sur ce qui vous amene", 6 mots).
   Les titres plus longs de section--conversion sur /construire
   et /formation gardent le 24ch, cette classe ne s'applique qu'ou
   elle est explicitement posee dans le HTML.
   Specificite (0,1,1) obligatoire : un simple ".h2--pleine-largeur"
   (0,1,0) perdait contre ".section--conversion h2" (0,1,1) malgre
   l'ordre dans le fichier, le 24ch continuait a s'appliquer. */
.section--conversion h2.h2--pleine-largeur { max-width: none; }

/* Regle nouvelle : section ajoutee sur la home entre le hero et les
   offres, titre et paragraphe centres. Meme patron que
   .section--conversion (texte centre, colonne .mesure recentree,
   h2 borne en largeur), en classe propre pour rester coherent avec
   le principe d'un modificateur par section (section--ouverture,
   section--offres, section--preuve...). */
.section--automatiser { text-align: center; }

/* /transmettre, section Deux formats : h2, h3, la mention descriptive
   et les paragraphes des cartes centres. Espace supplementaire
   avant la punchline de cloture, la derniere carte .offre finit
   juste au-dessus sinon. */
.section--formats { text-align: center; }

.section--formats .punchline {
  display: inline-block;
  max-width: 54rem;
  margin-top: 3.5rem;
}

/* Colonne de texte elargie par rapport a --mesure (34rem), a la
   demande de Simon. 42rem + 17% = 49.14rem, arrondi a 49rem :
   depasse de nouveau le plafond de 42rem fixe pour .mesure--large,
   meme logique que le premier passage a 46rem (deux paragraphes
   courts en tete de page, pas une page de lecture longue). */
.section--automatiser .mesure { max-width: 49rem; margin: 0 auto; }

/* Typo Georgia italique gras (celle de .mention, plus le gras),
   appliquee a deux .punchline precises plutot qu'a la classe
   entiere : la phrase « In fine... » (section--automatiser) et
   « L'IA est notre imprimerie... » (section--constat). Necessaire
   pour que l'italique existe vraiment : Arial Black (--titres, la
   police par defaut de .punchline) n'a pas de variante italique, et
   la regle globale des voix typographiques met font-synthesis: none
   dessus, qui interdit un italique fabrique par le navigateur.
   Georgia a un vrai gras et un vrai italique, d'ou le changement de
   famille. Taille et couleur de .punchline conservees. Le troisieme
   .punchline du site (tagline du manifeste) n'est pas concerne. */
.section--automatiser .punchline,
.section--constat .punchline,
.section--moments .punchline,
.section--formats .punchline {
  font-family: var(--corps);
  font-weight: bold;
  font-style: italic;
}

/* Section moments (page construire) : meme patron que
   .section--automatiser sur la home, titre et texte centres.
   La grille .moments reste volontairement hors de ce centrage :
   elle garde son alignement a gauche et sa pleine largeur, seul
   le texte d'ouverture/cloture est recentre. */
.section--moments { text-align: center; }
.section--moments .mesure--large { margin: 0 auto; }

/* Trois exemples en numerotation geante en fond : chiffre en
   Arial Black tres pale derriere chaque scene, structure la
   lecture sans carte ni filet. Issu d'une comparaison de 4 pistes
   visuelles validee par Simon (piste 1). */
.moments-liste {
  max-width: 40rem;
  margin: 2.5rem auto 0;
  text-align: left;
}

/* Espace supplementaire avant la phrase de cloture, scope a la
   section moments pour ne pas toucher .mesure--large ailleurs
   sur le site. */
.section--moments .moments-liste + .punchline { margin-top: 4.5rem; }

/* .punchline n'a pas de max-width propre : sur la home elle
   herite du centrage de son parent .mesure. Ici elle est directe
   dans la section, donc sans conteneur parent centre, filet et
   texte restent calés a gauche malgre text-align: center (qui ne
   centre que le texte, pas la boite du filet). On la borne et
   centre elle-meme. */
.section--moments .punchline {
  display: inline-block;
  max-width: 54rem;
}

.moments-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
}

.moments-item:first-child { padding-top: 0; }
.moments-item:last-child { padding-bottom: 0; }

.moments-num {
  flex: 0 0 auto;
  font-family: var(--titres);
  font-size: 4.5rem;
  line-height: 1;
  color: #ececec;
}

.moments-item p {
  margin: 0;
}

@media (max-width: 40rem) {
  .moments-item { gap: 1rem; }
  .moments-num { font-size: 3.2rem; }
}

/* Sous 30rem, meme a 3.2rem le chiffre en fond prend encore un
   tiers de la largeur d'un ecran de telephone et ecrase le texte
   dans le reste : reduit une seconde fois et le gap se resserre en
   consequence. */
@media (max-width: 30rem) {
  .moments-item { gap: 0.75rem; }
  .moments-num { font-size: 2.2rem; }
}

/* --- 6. En-tete : logo a gauche, signature a droite ------------- */

.entete {
  padding-top: 1.1rem;
  padding-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

/* En mobile, .navigation sort du flux (position: absolute, section
   6b) : le contenu visible de .entete se limite alors au bloc logo
   + signature, et un padding-bottom a 0 (regle ci-dessus, pensee
   pour le desktop ou .navigation occupe la ligne suivante avec sa
   propre marge) laissait la coupure de l'en-tete arriver juste
   sous le texte de la signature, sans air. Corrige en mobile
   seulement : le desktop garde padding-bottom: 0. */
@media (max-width: 50rem) {
  .entete {
    padding-bottom: 1rem;
  }
}

.marque { margin: 0; }

.marque-bloc {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.marque-lien {
  display: inline-block;
  text-decoration: none;
}

.marque-lien:hover,
.marque-lien:focus-visible {
  background: none;
  color: inherit;
}

.logotype {
  display: block;
  width: 9rem;
}

.entete--home .logotype { width: 9rem; }

.signature {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
  margin: 0;
}

.entete .signature {
  font-size: 0.95rem;
}

.navigation {
  width: 100%;
  margin-top: 1.5rem;
  border-top: var(--filet) solid var(--noir);
  border-bottom: 1px solid var(--noir);
}

.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0.45rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.5rem;
}

.navigation a {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.2rem 0.35rem;
}

/* --- 6b. Menu mobile : bouton a trois traits ---------------------
   Exception scopee au mobile a la regle "aucun contenu masque
   derriere une interaction" (ADR-042, pensee pour le desktop) :
   sous 50rem, les 5 liens de .navigation empiles verticalement
   repoussaient le hero de pres de 300px avant meme d'arriver au
   contenu. Case a cocher invisible + etiquette bouton, en CSS pur,
   sans JavaScript ni transition : ouverture instantanee, dans le
   meme esprit "aucune animation" que le reste de la charte.
   Au-dessus de 50rem, .menu-bouton reste display: none et
   .navigation garde son comportement actuel, inchange. */

.menu-toggle {
  position: absolute;
  left: -9999px;
}

.menu-bouton {
  display: none;
}

@media (max-width: 50rem) {
  /* .menu-bouton sort du flux flex de .entete : sans ca, il partage
     une ligne flex avec .marque-bloc, et quand la signature est
     assez large, la ligne entiere passe a la ligne suivante (le
     bouton se retrouve alors sous le logo, colle a gauche, au lieu
     de rester a droite sur la meme ligne que le logo). En position
     absolute, il reste a sa place quelle que soit la largeur du
     texte de la signature. Centre verticalement sur toute la
     hauteur du bloc logo + signature (top: 50% + translateY) :
     l'alignement tente sur la fin du mot "prototype" (bottom: 1rem)
     le faisait chevaucher la signature. right: 2.5rem = 1.5rem de
     padding lateral (section 5) + 1rem d'ecart demande par Simon
     pour ne pas coller le bouton au bord. */
  .menu-bouton {
    position: absolute;
    top: 50%;
    right: 2.5rem;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 0.32rem;
    width: 2.2rem;
    height: 2.2rem;
    cursor: pointer;
  }

  .menu-bouton span {
    display: block;
    width: 100%;
    height: var(--filet);
    background: var(--noir);
  }

  /* .navigation devient un panneau qui se depose sous l'en-tete
     plutot que de pousser le contenu : position absolute pour ne
     pas decaler le hero pendant que le menu est ferme. left/right: 0
     avec le width: 100% herite (section 6) fait deborder le panneau
     jusqu'aux bords de .entete, hors de son padding lateral reduit
     (section 5, 1.5rem en mobile) : un filet et un padding lui sont
     donc restitues ici plutot que d'heriter celui de .entete. */
  .navigation {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    margin-top: 0;
    background: var(--blanc);
    border-top: 1px solid var(--noir);
  }

  .menu-toggle:checked ~ .navigation {
    display: block;
  }

  .navigation ul {
    flex-direction: column;
    gap: 0;
    padding: 0.45rem 1.5rem;
  }

  .navigation li {
    border-bottom: 1px solid #ccc;
  }

  .navigation li:last-child {
    border-bottom: none;
  }

  .navigation a {
    display: block;
    padding: 0.7rem 0.35rem;
  }

  /* .entete passe en position: relative pour que .navigation en
     position: absolute se cale sous l'en-tete et non sous la page
     entiere. */
  .entete {
    position: relative;
  }
}

/* Reapparition de l'en-tete (logo, slogan, navigation) au scroll
   vers le haut, une fois qu'on l'a depassee : demande de Simon,
   pour retrouver la navigation sans remonter tout en haut d'une
   page longue. Vaut sur toutes les largeurs (mobile et desktop).
   Classe posee/retiree en JavaScript (detection de la direction du
   scroll, aucun equivalent CSS pur, voir le script en fin de page) ;
   transition longue et progressive (0.35s, ease-out) pour un
   retour en douceur plutot qu'un pop brutal (retour de Simon :
   0.15s lineaire etait trop sec) ; exception ponctuelle a la regle
   "aucune animation" au meme titre que le bouton .bouton deja
   anime. .entete--epinglee sort l'en-tete du flux (position:
   fixed) : le script compense en posant un padding-top egal a sa
   hauteur sur .entete-espaceur (element vide insere juste apres
   elle), pour que le contenu ne saute pas au moment ou elle
   devient fixe. */
.entete {
  transition: transform 0.35s ease-out;
}

.entete--epinglee {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--blanc);
  box-shadow: 0 1px 0 var(--noir);
}

.entete--masquee {
  transform: translateY(-100%);
}

/* --- 7. Hero : grille texte / photo -----------------------------
   Rompt la colonne unique. Le texte prend la largeur necessaire
   dans sa colonne, la photo occupe le reste de l'espace disponible
   a droite. Empile en une colonne sous 60rem, la photo passant
   alors au-dessus du texte. Le cadre avec fond gris et libelle
   visible tient lieu de filet de securite si l'image ne charge
   pas : mieux qu'un vide, moins trompeur qu'une icone de
   navigateur cassee. */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 60rem) {
  .hero {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .hero-photo { order: -1; max-width: 20rem; margin: 0 auto; }

  /* Une fois le hero empile en une colonne, la photo est centree
     (regle ci-dessus) mais le titre et le paragraphe restaient au
     fer a gauche par defaut : demande de Simon de les centrer aussi
     pour que le bloc entier soit visuellement equilibre sur mobile.
     Le bouton .action garde son alignement naturel (inline-block)
     et se retrouve donc centre avec le reste. */
  .hero-texte {
    text-align: center;
  }

  .hero-texte .canonique {
    margin-left: auto;
    margin-right: auto;
  }

  /* Demande de Simon : l'espace entre la photo et le titre doit
     etre plus marque que celui entre le titre et le paragraphe,
     inverse de l'etat actuel. Le gap de la grille .hero (2rem,
     ci-dessus) espace deja photo et .hero-texte comme bloc, mais
     h1 { margin-bottom: 3rem } (section 7, hors media query)
     creuse un ecart titre-paragraphe encore plus grand que celui
     photo-titre : agrandi ici, l'inverse est resserre juste apres. */
  .hero-photo {
    margin-bottom: 1rem;
  }

  .hero-texte h1 {
    margin-bottom: 0.5rem;
  }
}

.hero-texte h1 { margin-bottom: 3rem; }

/* Espace supplementaire demande par Simon entre le paragraphe et
   le CTA du hero, scope a .hero-texte pour ne pas toucher .action
   ailleurs sur le site (section--conversion, formulaire...). */
.hero-texte .canonique { margin-bottom: 2.2rem; }
.hero-texte .action { margin-top: 2.6rem; }

.hero-photo {
  background: #f2f2f2;
  border: 1px solid var(--noir);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Modificateur pour une photo affichee dans son ratio natif,
   sans recadrage 4/5 ni object-fit: cover. Cas: /transmettre, photo
   Mentorat.jpeg fournie en 1280x853 (paysage), non recadrable. */
.hero-photo--native {
  aspect-ratio: auto;
}

.hero-photo--native img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center top;
}

.surtitre {
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
}

/* Largeur ajustee a la demande de Simon : reduite de 34% (100% a
   66%), puis reelargie de 13% (66% * 1.13 = 74.6%, arrondi a 75%). */
.canonique { font-size: 1.05em; max-width: 75%; }

/* Le reglage a 75% ci-dessus vaut pour la colonne .hero-texte en
   desktop (grid a deux colonnes, section 7). Une fois le hero
   empile en une seule colonne pleine largeur sous 60rem, ce meme
   75% coupe le paragraphe plus tot que necessaire sur un ecran deja
   etroit. Neutralise uniquement sous le seuil mobile du gabarit. */
@media (max-width: 50rem) {
  .canonique { max-width: none; }
}

/* --- 8. Citation de marque ----------------------------------- */

.punchline {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  border-left: var(--filet) solid var(--noir);
  padding-left: 1rem;
  margin: 1.8rem 0 1.4rem;
}



/* --- 8b. Avis client (citation longue) ------------------------
   Meme traitement visuel que .punchline (filet a gauche, memes
   jetons) mais sans la surtaille de police : un temoignage de
   plusieurs paragraphes reste au corps du texte. */

.avis {
  border-left: var(--filet) solid var(--noir);
  padding-left: 1rem;
  margin: 1.8rem 0 1rem;
}

/* Grille d'avis : quatre temoignages courts mis cote a cote
   plutot que disperses le long de la page. Deux colonnes, chaque
   cellule tenant un .avis et sa mention. Le premier avis annule
   sa marge haute, deja portee par la grille. */

.avis-grille {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 3rem;
}

.avis-grille .avis { margin-top: 0; }

@media (max-width: 50rem) {
  .avis-grille {
    grid-template-columns: 1fr;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    scrollbar-width: none;
  }

  .avis-grille::-webkit-scrollbar {
    display: none;
  }

  .avis-grille li {
    flex: 0 0 87%;
    scroll-snap-align: start;
  }
}

/* Composant carrousel a fleches reutilisable (demande de Simon,
   18/09/2026, applique aux avis puis a "Ce que vous saurez faire") :
   defilement horizontal au doigt (scroll-snap CSS pur, desktop
   inchange partout ou ce composant est utilise), plus deux boutons
   ronds SOUS la piste plutot que superposes sur les cartes - un
   premier essai les avait poses en absolute par-dessus le texte,
   corrige ici. .carrousel-fleches est en grid a deux colonnes :
   chaque fleche garde sa colonne (gauche/droite) qu'elle soit
   visible ou non, pour que la fleche droite ne se recentre pas
   quand la gauche est masquee (attribut HTML hidden). La fleche
   gauche part cachee et n'apparait qu'apres avoir avance d'une
   carte ; la fleche droite disparait symetriquement en fin de
   piste (logique dans le script en fin de page, generique aux
   deux carrousels). .carrousel-fleche reste display: none par
   defaut (desktop) : les boutons n'existent qu'en mobile. */
.carrousel-fleche {
  display: none;
}

@media (max-width: 50rem) {
  .carrousel-fleches {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 1.25rem;
  }

  .carrousel-fleche {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    background: var(--blanc);
    border: var(--filet) solid var(--noir);
    border-radius: 50%;
    box-shadow: 3px 3px 0 var(--noir);
    cursor: pointer;
    transition: box-shadow 0.1s ease, transform 0.1s ease;
  }

  .carrousel-fleche[hidden] {
    display: none;
  }

  .carrousel-fleche:active {
    background: var(--noir);
    box-shadow: 0 0 0 var(--noir);
    transform: translate(3px, 3px);
  }

  .carrousel-fleche:active svg { stroke: var(--blanc); }

  .carrousel-fleche svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: var(--noir);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .carrousel-fleche--gauche { justify-self: start; margin-left: 1.5rem; }
  .carrousel-fleche--droite { justify-self: end; margin-right: 1.5rem; }
}



/* --- 8c. Duo image/texte en quinconce --------------------------
   Bloc réutilisé pour la méthode en trois temps et pour les
   captures de réalisations : image et texte côte à côte, l'ordre
   s'inverse une ligne sur deux. Cadre de taille uniforme, image
   entière visible via object-fit: contain (pas de recadrage CSS,
   conforme à ADR-029) : l'espace autour de l'image la plus étroite
   se remplit avec le fond gris du cadre. */

.duos {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  border-top: 1px solid var(--noir);
  padding-top: 1.5rem;
}

.duo-image { order: 1; }
.duo-texte { order: 2; }
.duo:nth-child(even) .duo-image { order: 2; }
.duo:nth-child(even) .duo-texte { order: 1; }

/* Conteneur pour un bloc image + legende : prend la place de
   .duo-image dans la grille (memes regles d'ordre/alternance),
   .duo-image garde son comportement standard inchange a
   l'interieur. */
.duo-image-bloc { order: 1; }
.duo:nth-child(even) .duo-image-bloc { order: 2; }

.duo-image {
  background: #f2f2f2;
  border: 1px solid var(--noir);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
}

.duo-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Legende sous la photo (mention type "realise sans trucage et
   sans IA"), en dehors de .duo-image pour ne pas toucher son
   aspect-ratio ni redimensionner l'image : le cadre reste
   identique aux deux autres photos du triptyque, la mention
   s'ajoute en plus, sous le cadre. */
.duo-legende {
  margin-top: 0.6rem;
  text-align: center;
}

@media (max-width: 50rem) {
  .duo { grid-template-columns: 1fr; }
  .duo-image,
  .duo-texte { order: initial; }

  /* .duo:nth-child(even) .duo-image/.duo-texte (specificite 0,2,0,
     definies hors media query juste au-dessus) continuaient a
     s'appliquer malgre "order: initial" ci-dessus (specificite
     0,1,0 plus faible) : la quinconce restait visible en mobile.
     Demande de Simon : garder l'alternance sur ordinateur, mais
     toujours image puis texte sur telephone, quelle que soit la
     ligne. Override a specificite egale pour neutraliser
     l'inversion des lignes paires. Le DOM des trois .duo de
     /construire place deja l'image avant le texte a l'ecriture
     (voir construire/index.html) : cet override suffit, aucun
     changement HTML necessaire. */
  .duo:nth-child(even) .duo-image,
  .duo:nth-child(even) .duo-texte,
  .duo:nth-child(even) .duo-image-bloc {
    order: initial;
  }
}

.sous-titre { margin-top: 4.5rem; }

/* Neocamino : image trop large pour son contenu en 4:3, le fond
   gris de secours dominait. Zoom ponctuel plutôt que recadrage
   du fichier source, à ajuster si un élément utile sort du cadre. */
.duo-image--zoom img { object-fit: cover; }

.duo-titre {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.55em;
}

.duo-titre h3 { margin: 0; }

.duo-logo {
  height: 1.5rem;
  width: auto;
}

/* Icone accolee a un titre, calee sur la hauteur des capitales
   plutot que sur une valeur fixe : elle suit le titre quand la
   taille de police varie avec la largeur de l'ecran. */

.titre-icone {
  display: inline-block;
  height: 0.8em;
  width: auto;
  vertical-align: baseline;
  margin-left: 0.5rem;
}

/* --- 8d. Formulaire de contact ---------------------------------
   Premier composant de formulaire du site (page /contact). Section
   parente centree en texte (section--conversion), le bloc formulaire
   lui-meme revient a un texte au fer a gauche des que les champs
   apparaissent. Une seule colonne pleine largeur plutot qu'une
   grille a deux colonnes : plus proche d'un formulaire de contact
   web standard, et plus lisible qu'une grille resserree. Largeur
   portee a 34rem, alignee sur --mesure. Champs hauts et respires
   (3rem de hauteur minimale), label au-dessus en petite capitale,
   memes jetons que le reste du site, aucune couleur ni arrondi
   nouveaux. */

.formulaire {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-width: 34rem;
  margin: 3rem auto 0;
  text-align: left;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.champ label {
  font-family: var(--titres);
  font-weight: 900;
  font-synthesis: none;
  font-synthesis-weight: none;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.champ input,
.champ textarea {
  width: 100%;
  font-family: var(--corps);
  font-size: 1.125rem;
  line-height: 1.4;
  min-height: 3.25rem;
  padding: 0.9em 1.1em;
  border: 1px solid var(--noir);
  background: var(--blanc);
  color: var(--noir);
}

.champ textarea {
  min-height: 10rem;
  resize: vertical;
}

.champ input:focus-visible,
.champ textarea:focus-visible {
  outline: 2px solid var(--noir);
  outline-offset: 3px;
}

.formulaire .action { margin-top: 0.5rem; }
.formulaire .bouton {
  width: 100%;
  text-align: center;
  padding-top: 1.1em;
  padding-bottom: 1.1em;
  font-size: 1.05rem;
}

/* Honeypot : technique sr-only complete, sans dependre d'un
   position:absolute/fixed qui peut se comporter differemment
   selon le contexte de mise en page du parent (le premier essai,
   sous un parent display:grid, laissait le champ visible). Ici
   l'element garde sa place dans le flux normal (aucun position),
   mais sa boite occupe 0 pixel dans les deux dimensions et tout
   debordement est coupe : rien ne peut plus le rendre visible,
   quel que soit le composant qui l'entoure. Hors du parcours
   clavier via tabindex="-1" sur le champ, ignore des lecteurs
   d'ecran via aria-hidden sur le conteneur. */

.hp-champ {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Bandeau de confirmation, revele en CSS pur par la cible d'ancre.
   Masque par defaut : aucune redirection n'a lieu tant que le
   workflow n8n n'est pas construit, mais la page reste correcte
   visuellement, ancre non ciblee. */

.bandeau-confirmation {
  display: none;
  max-width: 32rem;
  margin: 0 auto 2rem;
  border: var(--filet) solid var(--noir);
  padding: 1.5rem;
  text-align: left;
}

#merci:target {
  display: block;
}

/* --- 9. Blocs offres ---------------------------------------------
   Deux cartes asymetriques : la premiere plus large que la
   seconde, pour casser la symetrie parfaite d'une grille a
   deux colonnes egales. */

.offres {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
}

@media (max-width: 50rem) {
  .offres { grid-template-columns: 1fr; }
}

/* Regle nouvelle, scopee a la home : la seconde carte (Maitriser
   les outils IA vous-meme) laissait un dernier mot seul sur une
   4e ligne. Ratio resserre de 1.3fr/1fr a 1.15fr/1fr et gap reduit
   de 3rem a 2.5rem pour lui redonner de la largeur sans trop
   reduire la premiere carte, qui tient deja tout juste sur 3
   lignes. Les deux autres pages qui utilisent .offres brute
   (construire, transmettre) ne sont pas concernees. */
.section--offres .offres { grid-template-columns: 1.15fr 1fr; gap: 2.5rem; }

/* /transmettre : les deux cartes de .offres (Formation collective,
   Mentorat individuel) sont de largeur egale, contrairement au
   ratio 1.3fr/1fr utilise ailleurs. Pas de order : l'ordre visuel
   suit l'ordre du DOM. */
.offres--transmettre-avant { grid-template-columns: 1fr 1fr; }

/* Les deux regles ci-dessus (.section--offres .offres et
   .offres--transmettre-avant) ont une specificite plus elevee que
   ".offres { grid-template-columns: 1fr }" dans le @media plus
   haut : sans cet override, elles continuaient a s'appliquer sous
   50rem et empechaient les deux cartes de s'empiler en mobile,
   quel que soit l'ordre des regles dans le fichier. */
@media (max-width: 50rem) {
  .section--offres .offres,
  .offres--transmettre-avant {
    grid-template-columns: 1fr;
  }
}

.offre {
  border-top: var(--filet) solid var(--noir);
  padding-top: 1.1rem;
}

.offre h3 { margin-bottom: 0.5em; }

.lien-offre {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--noir);
  padding-bottom: 1px;
}

.lien-offre:hover,
.lien-offre:focus-visible { border-bottom-color: var(--blanc); }

/* Variante trio : trois cartes de meme largeur sur une seule
   ligne, encadrees sur les quatre cotes. Traitement volontairement
   distinct des cartes .offres nues a filet superieur, pour que
   deux listes voisines dans la page ne se confondent pas.

   Largeur non bornee : la grille occupe toute la colonne de
   section, exactement comme .offres, .duos et .preuves. Elle
   partage donc ses deux bords avec le titre et avec le filet de
   separation. Deux essais de bornage ont ete faits puis annules,
   a 54rem puis a 42rem : borner ce bloc le desaligne de tout le
   reste de la page, et le recentrer ne repare pas le desalignement,
   il le deplace.

   `min-width: 0` sur les cartes est obligatoire, pas cosmetique :
   une piste `1fr` a pour minimum automatique la largeur
   min-content de son contenu, et une carte peut donc pousser la
   grille au-dela de sa largeur maximale. C'est ce qui faisait
   deborder le bloc a droite du filet de section.

   Aucune proportion imposee : la hauteur suit le texte, et les
   trois cartes s'egalisent d'elles-memes sur la plus haute par
   l'etirement par defaut de la grille. Une proportion carree
   avait ete essayee puis retiree, elle creusait du vide sous les
   textes courts et gonflait la largeur minimale des cartes. */

.offres--trio {
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 3rem;
}

.offres--trio .offre {
  border: var(--filet) solid var(--noir);
  padding: 1.6rem;
  min-width: 0;
}

/* Respiration plus large qu'ailleurs entre le titre et le texte :
   dans une carte encadree, le titre et le paragraphe se touchent
   visuellement si on garde le 0.5em des cartes ouvertes. */

.offres--trio .offre h3 { margin-bottom: 1.25rem; }

@media (max-width: 50rem) {
  .offres--trio {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    scrollbar-width: none;
  }

  .offres--trio::-webkit-scrollbar {
    display: none;
  }

  .offres--trio .offre {
    flex: 0 0 87%;
    scroll-snap-align: start;
  }
}

/* La carte "Comprendre la donnee" est desormais le premier <li> de
   .offres--trio (avant, un <div> separe juste au-dessus de la
   grille) pour pouvoir faire partie du meme carrousel mobile que
   les trois autres. grid-column: 1 / -1 l'etire sur toute la
   largeur en desktop (grille a 3 colonnes) ; en mobile (flex,
   regle ci-dessus), la propriete est sans effet et la carte
   redevient une slide comme les autres. Le reste de son habillage
   (bordure, padding, marge du h3) vient de .offres--trio .offre,
   qu'elle herite maintenant comme les trois autres cartes. */
.offre--pleine-largeur {
  grid-column: 1 / -1;
}

/* Variante moments : liste de phrases courtes sans titre, filet
   superieur seul (pas de bordure complete comme .offres--trio),
   pour rester leger sur du texte sans h3. Deux colonnes, la
   derniere carte deborde seule sur la ligne suivante si le total
   est impair. */

.moments {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 3rem;
}

.moments li {
  border-top: var(--filet) solid var(--noir);
  padding-top: 1.1rem;
}

/* 5e moment, seul sur la derniere ligne en grille 2 colonnes :
   etire sur les deux colonnes puis borne et recentre, pour que
   la carte se retrouve au milieu de la grille plutot que calee
   dans sa colonne de gauche. */
.moments li:last-child {
  grid-column: 1 / -1;
  max-width: 25rem;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 50rem) {
  .moments { grid-template-columns: 1fr; }
  .moments li:last-child {
    grid-column: auto;
    max-width: none;
    margin: 0;
    text-align: left;
  }
}

/* --- 10. Bandeau de preuve ----------------------------------- */

.preuves {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4.5rem 1rem;
}

.preuves li { grid-column: span 2; }

/* Le centrage manuel des logos 5/6/7 (grid-column decale d'une
   colonne par rapport a la ligne du dessus) faisait paraitre
   Neocamino et FormaProFrance decales par rapport aux logos de la
   premiere ligne, alors qu'un centrage de 3 elements dans une
   grille a 8 colonnes ne peut de toute facon pas tomber sous les
   memes colonnes que la ligne du dessus. Retire : le flux naturel
   de la grille place desormais 5, 6 et 7 directement sous 1, 2 et
   3, alignes comme demande par Simon.

   Sous 45rem, positionnement manuel du 7e logo herite du desktop
   (grille a 8 colonnes) : applique tel quel a une grille a 4
   colonnes, le 5e occupait a lui seul les colonnes 2-3 (rien
   d'autre ne pouvait tenir sur sa ligne), et le 6e/7e retombaient
   chacun seuls a leur tour au lieu de se partager une ligne.
   Corrige en laissant le flux naturel de la grille placer 5 et 6
   cote a cote, et seul le 7e (impair, dernier) est centre sur sa
   propre ligne. */
@media (max-width: 45rem) {
  .preuves { grid-template-columns: repeat(4, 1fr); }
  .preuves li { grid-column: span 2; }
  .preuves li:nth-child(7) { grid-column: 2 / span 2; }
}

.preuves li {
  border-top: 1px solid var(--noir);
  padding-top: 1.25rem;
  text-align: center;
}

.preuves img {
  display: block;
  height: 8.5rem;
  width: auto;
  max-width: 100%;
  margin: 0 auto 1rem;
  object-fit: contain;
}

/* Sous 45rem, chaque logo occupe une cellule bien plus etroite
   (grille passee a 4 colonnes, chaque li en span 2, section 10) :
   un logo au format large garde sa hauteur fixe de 8.5rem et peut
   alors deborder de sa cellule malgre max-width: 100% (qui limite
   par rapport au parent mais pas par rapport a la cellule de
   grille elle-meme quand l'image est plus large que haute). Hauteur
   reduite et largeur explicitement bornee a la cellule pour que les
   logos restent alignes cote a cote sans se chevaucher ni deborder. */
@media (max-width: 45rem) {
  .preuves img {
    height: auto;
    max-height: 5rem;
    max-width: 100%;
  }
}

.preuve-nom {
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.15rem;
}

.preuve-mission { margin: 0; }

/* --- 11. Pied de page ------------------------------------------
   Deux colonnes de listes verticales (site, contact) a gauche,
   marque a droite. Mentions legales fusionnees sur une seule
   ligne centree en tout bas. */

.pied {
  border-top: var(--filet) solid var(--noir);
  margin-top: 1rem;
  padding-top: 1.75rem;
  padding-bottom: 3.5rem;
}

.pied-haut {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.5rem;
  margin-bottom: 4.5rem;
}

.pied-colonnes {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}

.pied-titre {
  font-family: var(--titres);
  font-weight: 900;
  font-synthesis: none;
  font-synthesis-weight: none;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 0.6rem;
}

.pied-nav ul,
.pied-contact ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pied-nav a,
.pied-contact a {
  font-family: var(--corps);
  font-weight: normal;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  padding: 0;
  /* L'adresse mail (simon.mrcls@gmail.com) est une chaine sans
     espace : sans ce reglage elle deborde du cadre du pied de page
     sur les ecrans etroits au lieu de se couper. Vaut a toutes les
     largeurs, ce n'est pas un reglage propre au mobile. */
  overflow-wrap: anywhere;
}

.pied-marque {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  text-align: right;
}

.pied-marque .logotype { width: 14rem; }

/* Newsletter en pied de page : nouveau composant, ajoute sur
   demande de Simon (17/09/2026). Reprend le gabarit d'un .champ
   de .formulaire mais en ligne (input + bouton cote a cote) et a
   l'echelle d'une colonne de footer plutot que d'une page entiere.
   Le bandeau de confirmation suit le meme mecanisme CSS pur que
   #merci en page contact (ancre ciblee = display: block), avec un
   id distinct (#merci-newsletter) pour ne pas entrer en conflit
   sur les pages qui n'ont pas ce bandeau de contact. */

.pied-newsletter {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 26rem;
  margin-left: 6rem;
}

/* Mobile : .pied-haut passe en colonnes qui s'empilent (flex-wrap),
   mais le margin-left: 6rem ci-dessus reste fixe et pousse le bloc
   newsletter hors de son alignement, voire hors ecran, une fois
   seul sur sa ligne. Annule uniquement cette marge sous le meme
   seuil que le reste du gabarit (section 5) ; max-width et
   direction en colonne restent utiles et inchanges. */
@media (max-width: 50rem) {
  .pied-newsletter {
    max-width: none;
    margin-left: 0;
  }
}

.newsletter-formulaire {
  display: flex;
  gap: 0.5rem;
}

.newsletter-formulaire input {
  flex: 1;
  min-width: 0;
  font-family: var(--corps);
  font-size: 0.95rem;
  padding: 0.6em 0.75em;
  border: var(--filet) solid var(--noir);
  background: var(--blanc);
  color: var(--noir);
}

.newsletter-formulaire input:focus-visible {
  outline: 2px solid var(--noir);
  outline-offset: 2px;
}

.newsletter-formulaire button {
  font-family: var(--corps);
  font-size: 0.95rem;
  padding: 0.6em 1em;
  border: var(--filet) solid var(--noir);
  background: var(--noir);
  color: var(--blanc);
  cursor: pointer;
  white-space: nowrap;
}

.newsletter-formulaire button:hover {
  background: var(--blanc);
  color: var(--noir);
}

.newsletter-bandeau {
  display: none;
}

#merci-newsletter:target {
  display: block;
}

.mention--legale {
  text-align: center;
  max-width: var(--large);
  margin-left: auto;
  margin-right: auto;
}

/* --- 12. Impression ------------------------------------------ */

@media print {
  .lien-evitement,
  .navigation,
  .pied-nav { display: none; }

  body {
    font-size: 11pt;
    line-height: 1.45;
  }

  a {
    background: none;
    color: #000;
    text-decoration: underline;
  }

  .bouton {
    background: none;
    color: #000;
    border: 1px solid #000;
  }

  .bouton::after,
  .contact-pied a[href^="/"]::after { content: " (d3m41n.fr" attr(href) ")"; }

  .contact-pied a[href^="http"]::after { content: " (" attr(href) ")"; }

  .hero { grid-template-columns: 1fr; }
  .hero-photo { display: none; }

  .pied-bas { display: block; }

  .section,
  .offre,
  .preuves li { break-inside: avoid; }
}