/* Polices libres (SIL Open Font License), hébergées sur le site : Montserrat, Raleway, Anton */
/* latin-ext */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/anton-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/anton-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/montserrat-italique-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/montserrat-italique-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/raleway-italique-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/raleway-italique-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/raleway-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/raleway-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Site laurentpetit.coach — feuille de style responsive (reconstruction 2026-10).
   Mobile d'abord : les règles de base valent pour le téléphone, les @media (min-width) ajoutent la mise en page large.
   Polices libres hébergées sur le site (polices.css). */

:root {
  --accent: 35, 73, 81;          /* bleu-vert foncé : titres, liens, boutons */
  --turquoise: 71, 147, 163;     /* bleu-vert moyen : bandes, contact */
  --clair: 225, 239, 242;        /* bleu-vert très clair */
  --gris: 250, 250, 250;
  --texte: #1c1c1c;
  --doux: #5b6366;
  --rouge: 187, 47, 47;
  --vert: 75, 209, 160;
  --bleu: 61, 155, 233;
  --bleu-clair: 163, 217, 246;
  --largeur: 1180px;
  --etroit: 780px;
  --marge: clamp(18px, 5vw, 40px);
  --espace: clamp(48px, 8vw, 96px);
  --rayon: 10px;
  --ombre: 0 10px 34px rgba(0, 0, 0, .10);
  --entete: 72px;
  --titres: montserrat, "Helvetica Neue", Arial, sans-serif;
  --corps: raleway, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--entete) + 12px); }
body {
  margin: 0; background: #fff; color: var(--texte);
  font: 400 17px/1.7 var(--corps);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: rgb(var(--accent)); text-underline-offset: 3px; }
a:hover { color: rgb(var(--turquoise)); }
h1, h2, h3, h4 { font-family: var(--titres); line-height: 1.25; margin: 0 0 .6em; color: rgb(var(--accent)); text-wrap: balance; }
h1 { font-size: clamp(28px, 5vw, 42px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
h2 { font-size: clamp(19px, 2.6vw, 24px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
h3 { font-size: clamp(17px, 2vw, 20px); font-weight: 700; }
p { margin: 0 0 1em; }
strong, b { font-weight: 700; }
ul { padding-left: 1.2em; }
:focus-visible { outline: 3px solid rgb(var(--turquoise)); outline-offset: 3px; }
.visuel-masque { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; background: #fff; border-radius: 6px; }
.lien-evitement:focus { top: 8px; }

/* ---------- En-tête et menu ---------- */
.entete {
  position: sticky; top: 0; z-index: 50; height: var(--entete);
  background: #fff; /* pas de backdrop-filter : il enfermerait le panneau du menu mobile (position: fixed) dans l'en-tête */
  border-bottom: 1px solid rgba(var(--accent), .12); box-shadow: 0 2px 14px rgba(0, 0, 0, .05);
}
.entete__in { height: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--marge); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.entete__logo img { width: 54px; height: auto; }
.menu-bouton {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid rgba(var(--accent), .25);
  border-radius: 999px; background: #fff; color: rgb(var(--accent)); font: 700 14px var(--titres); letter-spacing: .08em; cursor: pointer;
}
.menu-bouton__barres, .menu-bouton__barres::before, .menu-bouton__barres::after {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s, opacity .25s;
}
.menu-bouton__barres { position: relative; }
.menu-bouton__barres::before, .menu-bouton__barres::after { content: ""; position: absolute; left: 0; }
.menu-bouton__barres::before { top: -6px; }
.menu-bouton__barres::after { top: 6px; }
.menu-ouvert .menu-bouton__barres { background: transparent; }
.menu-ouvert .menu-bouton__barres::before { transform: translateY(6px) rotate(45deg); }
.menu-ouvert .menu-bouton__barres::after { transform: translateY(-6px) rotate(-45deg); }

/* menu mobile : panneau sous l'en-tête */
.menu {
  position: fixed; inset: var(--entete) 0 0 0; z-index: 49; overflow-y: auto;
  background: #fff; padding: 12px var(--marge) 40px;
  transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility 0s .2s;
}
.menu-ouvert .menu { transform: none; opacity: 1; visibility: visible; transition: opacity .2s, transform .2s; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu > ul > li { border-bottom: 1px solid rgba(var(--accent), .1); }
.menu a, .menu__titre {
  display: block; padding: 16px 4px; color: var(--texte); text-decoration: none;
  font: 700 17px var(--titres); letter-spacing: .03em;
}
.menu__titre { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.menu__titre::after { content: ""; width: 9px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-right: 6px; transition: transform .2s; }
.menu__titre[aria-expanded="true"]::after { transform: rotate(-135deg); }
.menu .sous-menu { display: none; padding: 0 0 12px 14px; }
.menu__titre[aria-expanded="true"] + .sous-menu { display: block; }
.sous-menu a { padding: 10px 4px; font: 600 16px var(--corps); }
.menu a[aria-current="page"] { color: rgb(var(--accent)); }
body.menu-ouvert { overflow: hidden; }

@media (min-width: 900px) {
  .menu-bouton { display: none; }
  .menu { position: static; inset: auto; padding: 0; background: none; transform: none; opacity: 1; visibility: visible; overflow: visible; transition: none; }
  .menu > ul { display: flex; gap: 6px; }
  .menu > ul > li { position: relative; border: 0; }
  .menu a, .menu__titre { padding: 10px 14px; font-size: 15px; border-radius: 6px; }
  .menu > ul > li > a:hover, .menu__titre:hover { color: rgb(var(--turquoise)); }
  .menu a[aria-current="page"], .menu__titre.actif { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; color: rgb(var(--accent)); }
  .menu__titre::after { width: 6px; height: 6px; margin: -3px 0 0 8px; }
  .menu .sous-menu {
    display: block; position: absolute; left: 50%; top: 100%; min-width: 240px; padding: 8px 0; margin-top: 6px;
    transform: translate(-50%, 6px); opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s, visibility 0s .15s;
    background: #fff; border-radius: 10px; box-shadow: 0 12px 34px rgba(0, 0, 0, .13), 0 0 0 1px rgba(var(--accent), .08);
  }
  .menu .sous-menu::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; } /* pont pour la souris */
  .menu li:hover > .sous-menu, .menu li:focus-within > .sous-menu, .menu__titre[aria-expanded="true"] + .sous-menu {
    opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .15s, transform .15s;
  }
  .sous-menu a { padding: 9px 20px; white-space: nowrap; font: 600 15px var(--corps); border-radius: 0; text-align: center; }
  .sous-menu a:hover { background: rgb(var(--clair)); color: rgb(var(--accent)); }
}

/* ---------- Mise en page ---------- */
.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); }
.conteneur--etroit { max-width: calc(var(--etroit) + 2 * var(--marge)); }
.bande { padding: var(--espace) 0; position: relative; }
.bande--serree { padding: calc(var(--espace) / 2) 0; }
.bande--noir { background: #000; color: #fff; }
.bande--noir h1, .bande--noir h2, .bande--noir h3, .bande--noir a { color: #fff; }
.bande--turquoise { background: rgb(var(--turquoise)); color: #fff; }
.bande--turquoise h2, .bande--turquoise a { color: #fff; }
.bande--clair { background: rgb(var(--clair)); }
.bande--gris { background: rgb(var(--gris)); }
.centre { text-align: center; }
.centre-bloc { margin-left: auto; margin-right: auto; }

/* titre de page */
.titre-page { padding: clamp(36px, 6vw, 64px) 0 clamp(20px, 3vw, 32px); text-align: center; }
.titre-page h1 { margin: 0; }
.titre-page h1::after { content: ""; display: block; width: 56px; height: 3px; margin: 18px auto 0; border-radius: 2px; background: rgb(var(--accent)); }
.titre-page p { max-width: 640px; margin: 18px auto 0; color: var(--doux); }

/* grilles qui s'empilent sur mobile */
.grille { display: grid; gap: clamp(20px, 3vw, 36px); }
@media (min-width: 760px) {
  .grille--2 { grid-template-columns: 1fr 1fr; align-items: center; }
  .grille--3 { grid-template-columns: repeat(3, 1fr); }
  .grille--1-2 { grid-template-columns: 1fr 2fr; }
  .grille--2-1 { grid-template-columns: 2fr 1fr; }
}
@media (min-width: 560px) and (max-width: 759px) { .grille--3 { grid-template-columns: 1fr 1fr; } }

/* bande en deux moitiés pleine largeur (photo d'un côté, contenu de l'autre) */
.moities { display: grid; }
.moities > * { min-width: 0; }
.moities__photo { position: relative; min-height: 340px; background: center / cover no-repeat; }
.moities--haute .moities__photo { min-height: min(125vw, 560px); }
.moities__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.moities__contenu { padding: var(--espace) var(--marge); display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 900px) {
  .moities { grid-template-columns: 1fr 1fr; min-height: 640px; }
  .moities--haute { min-height: min(66vw, 1040px); } /* photo portrait : moitié d'écran × 1,33 */
  .moities--inverse .moities__photo { order: 2; }
  .moities__contenu { padding: var(--espace) clamp(40px, 6vw, 110px); }
  .moities__contenu > * { max-width: 560px; }
}

/* grande image pleine largeur */
.image-large { width: 100%; height: clamp(260px, 55vw, 760px); object-fit: cover; }
.image-large--haute { height: max(340px, min(80vw, calc(100vh - var(--entete)), 1100px)); }
.image-arrondie { border-radius: var(--rayon); box-shadow: var(--ombre); width: 100%; }

/* ---------- Vidéos ---------- */
.video { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #000; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.video video, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border: 0; }
.video--verticale { aspect-ratio: 9 / 16; max-width: 420px; margin: 0 auto; }
.legende { margin-top: 12px; text-align: center; font-size: 15px; color: var(--doux); font-style: italic; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-block; padding: 14px 28px; border-radius: 999px; border: 2px solid rgb(var(--accent));
  background: rgb(var(--accent)); color: #fff; text-decoration: none; cursor: pointer;
  font: 700 14px var(--titres); letter-spacing: .1em; text-transform: uppercase; transition: filter .15s, background .15s, color .15s;
}
.bouton:hover { filter: brightness(1.2); color: #fff; }
.bouton--contour { background: transparent; color: rgb(var(--accent)); }
.bouton--contour:hover { background: rgb(var(--accent)); color: #fff; filter: none; }
.bouton--blanc { background: #fff; border-color: #fff; color: rgb(var(--accent)); }
.bouton--blanc:hover { color: rgb(var(--accent)); }
.bande--noir .bouton--contour, .bande--turquoise .bouton--contour { color: #fff; border-color: #fff; }

/* ---------- Cartes (rubriques, offres) ---------- */
.carte {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: clamp(28px, 4vw, 48px) 24px; min-height: 260px; text-align: center; text-decoration: none; color: inherit;
  border-radius: var(--rayon); transition: transform .2s, box-shadow .2s;
}
a.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre); color: inherit; }
.carte h2 { margin: 6px 0 0; font-size: 17px; color: inherit; }
.carte p { margin: 0; font-size: 15px; }
.carte__icone { width: 84px; height: 84px; object-fit: contain; }
.carte__lien { margin-top: 6px; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.carte--noir { background: #000; color: #fff; }
.carte--turquoise { background: rgb(var(--turquoise)); color: #fff; }
.carte--clair { background: rgb(var(--clair)); color: rgb(var(--accent)); }

/* ---------- Galerie de photos ---------- */
.galerie { columns: 2 150px; column-gap: 8px; }
@media (min-width: 760px) { .galerie { columns: 4 180px; column-gap: 10px; } }
@media (min-width: 1200px) { .galerie--large { columns: 6 180px; } }
.galerie__photo { break-inside: avoid; margin: 0 0 8px; display: block; padding: 0; border: 0; background: none; width: 100%; cursor: zoom-in; border-radius: 6px; overflow: hidden; }
@media (min-width: 760px) { .galerie__photo { margin-bottom: 10px; } }
.galerie__photo img { width: 100%; transition: transform .35s; }
.galerie__photo:hover img { transform: scale(1.04); }
.galerie__photo[hidden] { display: none; }
.galerie__plus { display: block; margin: 28px auto 0; }
.galerie--rangee { columns: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.galerie--rangee .galerie__photo { margin: 0; aspect-ratio: 4 / 3; }
.galerie--rangee .galerie__photo img { height: 100%; object-fit: cover; }

/* visionneuse plein écran */
.visionneuse { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .92); }
.visionneuse.ouverte { display: flex; }
.visionneuse img { max-width: 92vw; max-height: 86vh; width: auto; border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.visionneuse button { position: absolute; border: 0; background: rgba(255, 255, 255, .12); color: #fff; width: 52px; height: 52px; border-radius: 50%; font-size: 28px; line-height: 1; cursor: pointer; }
.visionneuse button:hover { background: rgba(255, 255, 255, .25); }
.visionneuse__fermer { top: 16px; right: 16px; }
.visionneuse__prec { left: 16px; top: 50%; transform: translateY(-50%); }
.visionneuse__suiv { right: 16px; top: 50%; transform: translateY(-50%); }
.visionneuse__compte { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .7); font: 600 14px var(--titres); }

/* ---------- Frise chronologique (dates clés) ---------- */
.frise { list-style: none; margin: 0; padding: 0; }
.frise li { display: grid; gap: 4px 28px; padding: 22px 0; border-bottom: 1px solid rgba(var(--accent), .12); }
.frise__date { font: 800 clamp(22px, 2.8vw, 30px)/1.1 var(--titres); color: rgb(var(--accent)); letter-spacing: .02em; white-space: nowrap; }
.frise__texte { font-size: clamp(16px, 1.8vw, 19px); }
@media (min-width: 700px) { .frise li { grid-template-columns: 250px 1fr; align-items: baseline; } }

/* ---------- Citation (grande phrase de l'accueil) ---------- */
.citation { font: 400 clamp(36px, 5.4vw, 64px)/1.08 anton, Impact, "Arial Narrow", sans-serif; color: #000; margin: 0; letter-spacing: .005em; }
.signature { width: 190px; margin-top: 18px; }
.bande--noir .signature { filter: invert(1); }

/* ---------- Texte riche venant de l'ancien site ---------- */
.texte { font-size: clamp(16px, 1.6vw, 18px); }
.texte > :last-child { margin-bottom: 0; }
.texte--grand { font-size: clamp(17px, 1.9vw, 20px); }
.texte--centre { text-align: center; }
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(20px, 5vw, 64px); margin-top: 40px; }
.logos img { height: clamp(64px, 9vw, 96px); width: auto; }

/* ---------- Témoignages ---------- */
.temoignages { display: grid; gap: 22px; }
@media (min-width: 760px) { .temoignages { grid-template-columns: 1fr 1fr; } }
.temoignage { margin: 0; padding: 26px 28px 22px; border-radius: var(--rayon); background: rgb(var(--gris)); border-left: 4px solid rgb(var(--turquoise)); }
.temoignage p { font-style: italic; }
.temoignage footer { font: 700 14px var(--titres); color: rgb(var(--accent)); }

/* ---------- Offres du livre (prix) ---------- */
.offres { display: grid; gap: 0; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
@media (min-width: 760px) { .offres { grid-template-columns: 1fr 1fr; } }
.offre { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: clamp(32px, 5vw, 56px) 24px; text-align: center; min-height: 320px; }
.offre img { width: 100%; height: 100%; object-fit: cover; }
.offre--photo { padding: 0; }
.offre h2 { color: inherit; margin: 0; font-size: clamp(22px, 3vw, 30px); letter-spacing: .14em; }
.offre__prix { font: 800 clamp(26px, 3.4vw, 34px) var(--titres); letter-spacing: .08em; margin: 8px 0 12px; }
.offre__detail { font-size: 15px; margin: 0; }
.offre--vert { background: rgb(var(--vert)); color: #000; }
.offre--rouge { background: rgb(var(--rouge)); color: #fff; }
.offre--bleu { background: rgb(var(--bleu)); color: #fff; }
.offre--bleu-clair { background: rgb(var(--bleu-clair)); color: #000; }
.offre .bouton { background: transparent; border-color: currentColor; color: inherit; }
.offre .bouton:hover { background: rgba(0, 0, 0, .12); filter: none; }

/* ---------- Formulaire de contact ---------- */
.formulaire { display: grid; gap: 12px; }
@media (min-width: 560px) { .formulaire { grid-template-columns: 1fr 1fr; } .formulaire .plein { grid-column: 1 / -1; } }
.formulaire label { display: block; font: 600 13px var(--titres); letter-spacing: .04em; margin-bottom: 4px; }
.formulaire input, .formulaire textarea {
  width: 100%; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 8px;
  background: rgba(255, 255, 255, .95); color: var(--texte); font: 16px var(--corps);
}
.formulaire textarea { min-height: 130px; resize: vertical; }
.formulaire .bouton { width: 100%; }
.formulaire__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__etat { margin: 4px 0 0; padding: 12px 16px; border-radius: 8px; font-weight: 600; }
.formulaire__etat.ok { background: rgba(255, 255, 255, .95); color: rgb(var(--accent)); }
.formulaire__etat.erreur { background: #fff1f0; color: #a3261f; }
.contact-infos { margin-top: 26px; text-align: center; }
.contact-infos a { color: inherit; }

/* ---------- Pied de page ---------- */
.pied { background: rgb(246, 249, 250); border-top: 1px solid rgba(var(--accent), .12); padding: 44px 0 30px; text-align: center; font-size: 15px; color: var(--doux); }
.pied a { color: rgb(var(--accent)); text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied__contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; margin-bottom: 18px; color: var(--texte); }
.pied__legal { margin: 10px 0 0; }
.pied__legal span { color: rgba(var(--accent), .4); margin: 0 6px; }
.pied__copie { margin: 14px 0 0; font-size: 13px; }

/* ---------- Damier photo / offre (page du livre) ---------- */
.damier { display: grid; }
.damier > * { min-height: 360px; }
.damier__photo { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 760px) {
  .damier { grid-template-columns: 1fr 1fr; max-width: 1040px; margin: 0 auto var(--espace); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
  .damier > * { min-height: 0; aspect-ratio: 5 / 4; }
  .damier .offre { padding: 28px; }
  .damier .offre h2 { font-size: clamp(18px, 1.9vw, 23px); }
  .damier .offre__prix { font-size: clamp(22px, 2.3vw, 27px); margin: 4px 0 8px; }
  .damier .offre__prix--petit { font-size: 17px; }
  .damier .offre__detail { font-size: 14px; }
  .damier .bouton { padding: 11px 22px; font-size: 13px; }
}
/* sur mobile : chaque photo au-dessus de son offre (ordre du HTML) ; sur ordinateur : damier */
@media (min-width: 760px) { .damier { grid-auto-flow: row dense; } .damier--droite { grid-column: 2; } .damier--gauche { grid-column: 1; } }
.offre__prix--petit { font-size: clamp(17px, 2vw, 21px); }
.offre--vert .bouton, .offre--bleu-clair .bouton { color: #000; }

/* mosaïque « Ils l'ont aimé » */
/* mobile : titre en bandeau, puis les 3 photos alignées ; ordinateur : damier 3 colonnes (titre en haut au centre) */
.mosaique { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 1060px; margin: 0 auto; }
.mosaique img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.mosaique__titre { display: flex; align-items: center; justify-content: center; background: rgb(var(--vert)); padding: 18px; }
.mosaique__titre h2 { margin: 0; font-size: clamp(20px, 2.6vw, 28px); text-align: center; }
@media (max-width: 759px) {
  .mosaique__titre { grid-column: 1 / -1; order: -1; }
}
@media (min-width: 760px) {
  .mosaique__titre { padding: 24px; aspect-ratio: 3 / 4; }
  .mosaique__centre { grid-column: 2; }
}

/* ---------- Qualité de vie en entreprise (et autres pages de présentation) ---------- */
.qvt-logo { width: 180px; margin: 28px auto; }
.qvt-sujets { margin-top: 18px; text-transform: uppercase; letter-spacing: .08em; color: rgb(var(--accent)); }
.qvt-verbes { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; }
.qvt-verbes li { padding: 8px 18px; border-radius: 999px; background: rgb(var(--clair)); color: rgb(var(--accent)); text-transform: uppercase; letter-spacing: .08em; font: 600 14px var(--titres); }
.points-forts { margin: 0; }
.points-forts dt { font: 700 15px var(--titres); letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--turquoise)); margin-top: 20px; }
.points-forts dd { margin: 4px 0 0; }
.points-forts dd ul { margin: 6px 0 0; }
.texte ul li, .texte ol li { margin-bottom: 6px; }
.themes { columns: 1; padding-left: 1.6em; }
@media (min-width: 900px) { .themes { columns: 2; column-gap: 48px; } .themes li { break-inside: avoid; } }
.citations-courtes { list-style: none; padding: 0; }
.citations-courtes li { padding: 12px 0 12px 22px; border-left: 3px solid rgb(var(--clair)); margin: 0 0 10px; font-style: italic; }

/* bloc de texte posé sur une grande photo (sur mobile : photo puis texte) */
.encart-photo { position: relative; display: grid; }
.encart-photo__image { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.encart-photo__carte { padding: 32px var(--marge); background: rgb(255, 245, 240); }
.encart-photo__carte h2 { text-align: center; }
.encart-photo__carte ul { margin: 0; padding-left: 1.1em; }
.encart-photo__carte li { margin-bottom: 6px; }
@media (min-width: 900px) {
  .encart-photo { min-height: min(61vw, 1100px); align-items: center; padding: 40px 0; } /* = proportions des photos : peu ou pas recadrées */
  .encart-photo__image { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .encart-photo__carte { position: relative; width: min(520px, 42%); margin-left: max(var(--marge), calc((100vw - var(--largeur)) / 2 + 20px)); padding: 36px 40px; border-radius: var(--rayon); background: rgba(255, 255, 255, .86); backdrop-filter: blur(6px); box-shadow: var(--ombre); }
  .encart-photo--droite .encart-photo__carte { margin-left: auto; margin-right: max(var(--marge), calc((100vw - var(--largeur)) / 2 + 20px)); }
}

/* vidéo d'ambiance en bandeau, logo au centre */
.bandeau-video { position: relative; height: clamp(220px, 35vw, 500px); overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; }
.bandeau-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bandeau-video img { position: relative; width: clamp(120px, 17vw, 240px); }

/* grande citation */
.grande-citation { position: relative; margin: 0 auto; text-align: center; }
.grande-citation svg { width: clamp(90px, 16vw, 200px); height: auto; margin: 0 auto -40px; fill: rgb(var(--clair)); }
.grande-citation__avant { position: relative; font: 700 16px var(--titres); letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--turquoise)); }
.grande-citation blockquote { position: relative; margin: 0; font: italic 400 clamp(20px, 2.6vw, 28px)/1.45 var(--corps); color: var(--texte); }
.grande-citation figcaption { margin-top: 16px; font: 700 16px var(--titres); color: rgb(var(--accent)); }
.grande-citation figcaption span { font-weight: 400; color: var(--doux); }

/* ---------- Grande photo de tête avec titre (UNESCO…) ---------- */
.hero-photo { position: relative; min-height: clamp(380px, 52vw, 640px); display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; background: #000; overflow: hidden; }
.hero-photo__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero-photo__contenu { position: relative; padding: 48px var(--marge); }
.hero-photo h1 { color: #fff; font-size: clamp(36px, 7vw, 76px); letter-spacing: .04em; }
.hero-photo h1::after { display: none; }
.hero-photo__infos { font: 700 clamp(15px, 1.8vw, 19px)/1.8 var(--titres); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 26px; }
.programme { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.programme li { padding: 14px 20px; border-radius: 8px; background: rgb(var(--gris)); border-left: 4px solid rgb(var(--turquoise)); font: 600 clamp(15px, 1.7vw, 17px) var(--titres); }

/* ---------- Accueil ---------- */
.conteneur--large { max-width: 1500px; }
.accueil-hero { display: grid; background: #fff; overflow: hidden; }
.accueil-hero__photo { display: flex; align-items: flex-end; justify-content: center; background: #fff; }
.accueil-hero__photo img { width: min(100%, 560px); max-height: 78vh; object-fit: contain; object-position: bottom; }
.accueil-hero__texte { padding: 36px var(--marge) var(--espace); display: flex; flex-direction: column; gap: 22px; }
.accueil-hero__citation { display: flex; gap: 22px; align-items: stretch; }
.accueil-hero__fleche { flex: none; width: 18px; color: #000; display: none; }
.accueil-hero__fleche svg { width: 100%; height: 100%; fill: currentColor; }
.accueil-hero .signature { width: 170px; margin: 0; }
@media (max-width: 899px) {
  /* mobile / tablette : la photo occupe tout l'écran sous l'en-tête, quel que soit l'appareil
     (svh = hauteur visible, barre d'adresse comprise ; calée en haut, seuls les côtés/le bas sont rognés) */
  .accueil-hero__photo { height: calc(100vh - var(--entete)); height: calc(100svh - var(--entete)); }
  .accueil-hero__photo img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 50% 0; padding-top: 16px; }
}
@media (min-width: 900px) {
  /* la photo remplit toute sa moitié comme un fond (calée en haut : pas de vide au-dessus de la tête,
     seul le bas est rogné) ; le texte a sa propre colonne et ne touche jamais la photo */
  .accueil-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1600px; margin: 0 auto;
    min-height: calc(100vh - var(--entete)); }
  .accueil-hero__photo { position: relative; min-height: 100%; }
  .accueil-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
    object-fit: cover; object-position: 50% 0; padding-top: clamp(16px, 2.5vw, 40px); }
  .accueil-hero__texte { justify-content: center; padding: 48px clamp(32px, 5vw, 96px); max-width: 640px; }
  .accueil-hero__citation .citation { text-align: right; }
  .accueil-hero__fleche { display: block; }
  .accueil-hero .signature { align-self: center; }
}
.accueil-slogan { font: 700 clamp(18px, 2.2vw, 22px) var(--titres); letter-spacing: .06em; margin: 1.4em 0; }
.accueil-note { font-size: 15px; opacity: .8; }
.accueil-livre__couverture img { width: 100%; max-width: 560px; margin: 0 auto; transition: transform .25s; }
.accueil-livre__couverture:hover img { transform: scale(1.02); }
.accueil-livre h2 { color: rgb(var(--turquoise)); margin-bottom: .2em; }
.accueil-livre__auteur { font: 700 15px var(--titres); letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--accent)); margin-bottom: 24px; }
.accueil-livre .image-arrondie { max-width: 520px; margin: 0 auto; }
.accueil-rubriques { gap: 0; }
.accueil-rubriques .carte { border-radius: 0; min-height: 340px; }
@media (min-width: 760px) { .accueil-rubriques .carte { min-height: clamp(420px, 34vw, 560px); } }
a.carte:hover { transform: none; filter: brightness(1.08); }
.rappels { list-style: none; padding: 0; margin: 0 0 28px; font-size: clamp(16px, 1.8vw, 19px); }
.rappels li { padding: 6px 0 6px 26px; position: relative; }
.rappels li::before { content: ""; position: absolute; left: 0; top: 17px; width: 12px; height: 2px; background: rgb(var(--turquoise)); }
.accueil-encart { margin-top: 40px; padding: 26px 28px; border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--rayon); text-align: center; }
.accueil-encart h3 { color: #fff; letter-spacing: .08em; text-transform: uppercase; font-size: 17px; }
.accueil-encart p { margin: 0; }
.accueil-unesco { display: block; }
.accueil-unesco img { width: 100%; height: clamp(240px, 52vw, 820px); object-fit: cover; object-position: 50% 20%; }
.formulaire__mention { font-size: 13px; opacity: .85; margin: 0; }
.formulaire__mention a { color: inherit; }
.moities__contenu.bande--turquoise label { color: #fff; }

/* ---------- Divers ---------- */
.espace-haut { margin-top: clamp(28px, 4vw, 48px); }
.liste-liens { list-style: none; padding: 0; margin: 0; }
.liste-liens li { padding: 8px 0; border-bottom: 1px solid rgba(var(--accent), .1); }
.liste-liens a { text-decoration: none; font-weight: 600; }
.liste-liens a:hover { text-decoration: underline; }
.fleche-bas { display: inline-block; width: 22px; height: 22px; border: solid currentColor; border-width: 0 3px 3px 0; transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
.galerie--trois { columns: 2 140px; }
@media (min-width: 760px) { .galerie--trois { columns: 3; } }

/* ---------- Page 404 ---------- */
.introuvable { min-height: 50vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--espace) var(--marge); }
.introuvable__code { font: 400 clamp(80px, 16vw, 160px)/1 anton, Impact, sans-serif; color: rgb(var(--clair)); margin: 0; }

/* sur-titre au-dessus d'un titre de page (chroniques) */
.titre-page .surtitre { margin: 0 0 10px; font: 600 14px var(--titres); letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--turquoise)); }

:root { --lp-accent: 35, 73, 81; --lp-accent-clair: 230, 238, 240; }
/* ---------- Pages légales (mentions légales, confidentialité, CGV) ---------- */
.lp-page-legale { display: block; background: #fff; }
.lp-legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 70px 24px 90px;
  font: 16px/1.7 raleway, "Helvetica Neue", Arial, sans-serif;
  color: #222;
}
.lp-legal .lp-titre { margin: 0 0 48px; }
.lp-legal h2 {
  font: 700 19px/1.3 montserrat, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .04em;
  color: rgb(var(--lp-accent));
  margin: 40px 0 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--lp-accent), .12);
}
.lp-legal h3 { font: 700 16px/1.4 montserrat, "Helvetica Neue", Arial, sans-serif; color: rgb(var(--lp-accent)); margin: 28px 0 8px; }
.lp-legal p, .lp-legal li { margin: 0 0 12px; }
.lp-legal ul { padding-left: 22px; margin: 0 0 12px; }
.lp-legal a { color: rgb(var(--lp-accent)); text-decoration: underline; text-underline-offset: 3px; }
.lp-legal blockquote {
  margin: 12px 0; padding: 16px 20px;
  background: rgb(var(--lp-accent-clair)); border-left: 3px solid rgb(var(--lp-accent)); border-radius: 4px;
}
.lp-legal blockquote p:last-child { margin: 0; }
.lp-legal mark.lp-todo { background: #fff3c4; padding: 2px 6px; border-radius: 3px; }

/* ---------- Commande du livre : fenêtre (commande.js) ---------- */
html.lp-cmd-ouverte, html.lp-cmd-ouverte body { overflow: hidden; }
.lp-cmd { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.lp-cmd[hidden] { display: none; }
.lp-cmd__fond { position: absolute; inset: 0; background: rgba(15, 30, 34, .55); backdrop-filter: blur(2px); }
.lp-cmd__panneau {
  position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: #fff; border-radius: 14px; box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
  padding: 34px 34px 28px; font: 15px/1.5 raleway, "Helvetica Neue", Arial, sans-serif; color: #1a1a1a;
}
.lp-cmd__fermer {
  position: absolute; top: 12px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: transparent; font-size: 28px; line-height: 1; color: #555; cursor: pointer;
}
.lp-cmd__fermer:hover { background: rgb(var(--lp-accent-clair)); color: rgb(var(--lp-accent)); }
.lp-cmd__sur { margin: 0 0 4px; font: 600 12px/1.4 montserrat, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--lp-accent), .7); }
.lp-cmd__titre { margin: 0 0 22px; font: 700 23px/1.25 montserrat, sans-serif; color: rgb(var(--lp-accent)); }
.lp-cmd fieldset { border: 0; margin: 0 0 18px; padding: 0; }
.lp-cmd legend, .lp-cmd__label { display: block; margin: 0 0 8px; font: 700 13px/1.4 montserrat, sans-serif; letter-spacing: .04em; color: #333; }
.lp-cmd__label small { font-weight: 400; color: #777; }
.lp-cmd__offres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lp-cmd__offres legend { grid-column: 1 / -1; }
.lp-cmd__offre {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 12px; cursor: pointer;
  border: 2px solid #e2e8ea; border-radius: 10px; transition: border-color .15s, background .15s;
}
.lp-cmd__offre:hover { border-color: rgba(var(--lp-accent), .45); }
.lp-cmd__offre:has(input:checked) { border-color: rgb(var(--lp-accent)); background: rgb(var(--lp-accent-clair)); }
.lp-cmd__offre input { position: absolute; opacity: 0; }
.lp-cmd__offre:has(input:focus-visible) { outline: 2px solid rgb(var(--lp-accent)); outline-offset: 2px; }
.lp-cmd__offre-nom { font: 700 15px/1.3 montserrat, sans-serif; color: rgb(var(--lp-accent)); }
.lp-cmd__offre-sous { font-size: 13px; color: #555; }
.lp-cmd__offre-prix { margin-top: 6px; font: 700 18px/1.2 montserrat, sans-serif; color: #1a1a1a; }
.lp-cmd__ligne { display: flex; align-items: center; justify-content: space-between; margin: 0 0 18px; }
.lp-cmd__ligne .lp-cmd__label { margin: 0; }
.lp-cmd__qte { display: inline-flex; align-items: center; border: 2px solid #e2e8ea; border-radius: 999px; overflow: hidden; }
.lp-cmd__qte button { width: 40px; height: 38px; border: 0; background: #fff; font-size: 20px; color: rgb(var(--lp-accent)); cursor: pointer; }
.lp-cmd__qte button:hover:not(:disabled) { background: rgb(var(--lp-accent-clair)); }
.lp-cmd__qte button:disabled { color: #bbb; cursor: default; }
.lp-cmd__qte output { min-width: 34px; text-align: center; font: 700 16px montserrat, sans-serif; }
.lp-cmd__dedicace { margin: 0 0 18px; }
.lp-cmd__dedicace[hidden] { display: none; }
.lp-cmd textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border: 2px solid #e2e8ea; border-radius: 10px;
  font: inherit; resize: vertical; min-height: 76px;
}
.lp-cmd textarea:focus { outline: none; border-color: rgb(var(--lp-accent)); }
.lp-cmd__aide { margin: 6px 0 0; font-size: 12.5px; color: #777; }
.lp-cmd__total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 4px; border-top: 1px solid #e8edee; }
.lp-cmd__total span { font: 700 14px montserrat, sans-serif; letter-spacing: .04em; }
.lp-cmd__total strong { font: 700 24px montserrat, sans-serif; color: rgb(var(--lp-accent)); }
.lp-cmd__livraison { margin: 0 0 16px; font-size: 13px; color: #2e7d4f; }
.lp-cmd__cgv { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; font-size: 13.5px; cursor: pointer; }
.lp-cmd__cgv input { margin-top: 3px; width: 17px; height: 17px; accent-color: rgb(var(--lp-accent)); flex: none; }
.lp-cmd__cgv a, .lp-cmd__erreur a { color: rgb(var(--lp-accent)); }
.lp-cmd__cgv [hidden] { display: none; }
.lp-cmd__erreur { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #fdecea; color: #a12a1f; font-size: 13.5px; }
.lp-cmd__erreur[hidden] { display: none; }
.lp-cmd__payer {
  width: 100%; padding: 15px 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgb(var(--lp-accent)); color: #fff; font: 700 15px montserrat, sans-serif; letter-spacing: .05em;
  transition: filter .15s;
}
.lp-cmd__payer:hover:not(:disabled) { filter: brightness(1.2); }
.lp-cmd__payer:disabled { opacity: .7; cursor: wait; }
.lp-cmd__secu { margin: 12px 0 0; text-align: center; font-size: 12px; color: #777; }
.lp-cmd__etape2[hidden], .lp-cmd__etape1[hidden] { display: none; }
.lp-cmd__retour { margin: 0 0 14px; padding: 0; border: 0; background: none; color: rgb(var(--lp-accent)); font: 600 14px montserrat, sans-serif; cursor: pointer; }
.lp-cmd__chargement { padding: 40px 0; text-align: center; color: #777; }
@media (max-width: 520px) {
  .lp-cmd { padding: 0; align-items: stretch; }
  .lp-cmd__panneau { max-height: 100vh; border-radius: 0; padding: 26px 18px 22px; }
  .lp-cmd__offres { grid-template-columns: 1fr; }
}

/* ---------- Page « commande confirmée » ---------- */
.lp-merci [hidden] { display: none; }
.lp-merci__centre { text-align: center; }
.lp-merci__grand { font-size: 18px; }
.lp-merci__recap { max-width: 460px; margin: 26px auto; padding: 18px 22px; background: rgb(var(--lp-accent-clair)); border-radius: 12px; }
.lp-merci__recap p { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 7px 0; border-bottom: 1px solid rgba(var(--lp-accent), .12); }
.lp-merci__recap p:last-child { border-bottom: 0; }
.lp-merci__recap span { color: #555; }
.lp-merci__recap strong { text-align: right; }
.lp-merci__bouton {
  display: inline-block; margin-top: 10px; padding: 13px 26px; border-radius: 999px;
  background: rgb(var(--lp-accent)); color: #fff !important; text-decoration: none !important; font: 700 14px montserrat, sans-serif;
}