/* Accueil — DA v2 */
.centre { text-align: center; margin-top: 48px; }

/* ---------- Hero plein cadre ---------- */
.hero { position: relative; color: var(--blanc); display: flex; flex-direction: column; min-height: min(92vh, 900px); isolation: isolate; margin-bottom: 40px; }
.hero__photo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; animation: hero-zoom 14s var(--ease) both; }
@keyframes hero-zoom { from { transform: scale(1.08); } to { transform: none; } }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 39, 64, .58) 0%, rgba(5, 39, 64, .18) 46%, rgba(5, 39, 64, .62) 100%); }
.hero__in { padding-top: 28px; display: grid; gap: 14px; justify-items: start; }
.hero__note { display: flex; align-items: center; gap: 14px; margin: 0; font-size: .9688rem; line-height: 1.35; text-shadow: 0 1px 12px rgba(5, 39, 64, .5); }
.hero__note img { width: 40px; height: auto; }
.hero h1 { max-width: 15em; text-shadow: 0 2px 30px rgba(5, 39, 64, .45); }
.hero__chapo { font-size: 1.1875rem; line-height: 1.5; max-width: 30em; margin: 0; text-shadow: 0 1px 14px rgba(5, 39, 64, .6); }
.hero__bas { margin-top: auto; padding-block: 28px 16px; }
.hero__legende { text-align: right; font-size: .875rem; margin: 0 4px; text-shadow: 0 1px 10px rgba(5, 39, 64, .7); }
.hero__legende a { text-decoration: none; border-bottom: 1px dashed currentColor; }
@media (min-width: 900px) {
  .hero { margin-bottom: 56px; }
  .hero__in { padding-top: clamp(40px, 7vh, 96px); gap: 22px; justify-items: center; text-align: center; }
  .hero__chapo { font-size: 1.375rem; }
}

/* Moteur : carte posée dans le hero, juste sous le chapô */
.moteur { background: var(--blanc); color: var(--marine); border-radius: var(--r-carte); box-shadow: var(--ombre); padding: 18px; display: grid; gap: 14px; max-width: 1120px; width: 100%; justify-self: center; margin-top: 8px; text-align: left; }
@media (min-width: 900px) { .moteur { margin-top: clamp(36px, 7vh, 64px); } }
.moteur__chiffres { list-style: none; margin: 0; padding: 0 4px; display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center; font-size: .9688rem; }
.moteur__chiffres li { display: flex; align-items: center; gap: 8px; }
.moteur__chiffres img { width: 34px; height: 34px; object-fit: contain; }
.moteur__chiffres b { font: 800 1.125rem var(--titre); }
.moteur__champs { display: grid; gap: 10px; }
.moteur__champ { position: relative; background: var(--menthe-pale); border-radius: var(--r-outil); transition: background .2s, box-shadow .2s; }
.moteur__champ:hover { background: var(--menthe); }
.moteur__champ:focus-within { box-shadow: 0 0 0 3px var(--ambre-fonce); background: var(--blanc); }
.moteur__champ label { position: absolute; top: 10px; left: 18px; font-size: .8125rem; color: var(--gris); pointer-events: none; }
.moteur__champ select { width: 100%; min-height: 64px; padding: 28px 40px 8px 18px; border: 0; background: transparent; appearance: none; cursor: pointer; font: 700 1.0625rem/1.2 var(--texte); text-overflow: ellipsis; outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23083859' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; background-size: 12px; }
.moteur__btn { min-height: 64px; }
/* Mobile : titre dans le ciel, visage dégagé à droite du titre, carte à cheval sur le bas de la photo, chiffres et légende sur le blanc */
@media (max-width: 619px) {
  .hero { min-height: 0; margin-bottom: 28px; overflow: hidden; }
  .hero::before { background: linear-gradient(180deg, rgba(5, 39, 64, .5) 0%, rgba(5, 39, 64, .22) 40%, rgba(5, 39, 64, .4) 100%); }
  .hero__photo img { position: absolute; left: 0; top: -150px; height: 840px; object-position: 36% 50%; }
  .hero__in { padding-top: 20px; gap: 12px; grid-template-columns: minmax(0, 1fr); }
  .hero__note { font-size: .875rem; gap: 10px; }
  .hero__note img { width: 32px; }
  .hero h1 { font-size: min(2.125rem, 9vw); max-width: 10.6em; }
  .hero__chapo { font-size: 1.0625rem; line-height: 1.4; max-width: 17em; text-wrap: balance; text-shadow: 0 1px 3px rgba(5, 39, 64, .55), 0 1px 16px rgba(5, 39, 64, .7); }
  .moteur { background: none; box-shadow: none; border-radius: 0; padding: 0; gap: 14px; margin-top: 10px; min-width: 0; }
  .moteur__champs { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 10px; background: var(--blanc); border-radius: var(--r-carte); box-shadow: var(--ombre); }
  .moteur__champs::before { content: ""; position: absolute; z-index: -1; top: 50%; left: -50vw; right: -50vw; height: 600px; background: var(--blanc); }
  .moteur__chiffres { order: 2; flex-wrap: nowrap; gap: 10px; padding: 0; font-size: .8125rem; white-space: nowrap; }
  .moteur__chiffres li { gap: 5px; }
  .moteur__chiffres img { width: 24px; height: 24px; }
  .moteur__chiffres b { font-size: .9375rem; }
  .moteur__champ label { left: 14px; top: 8px; }
  .moteur__champ .liste-btn, .moteur__champ select { min-height: 54px; padding: 24px 12px 6px 14px; font-size: 1rem; }
  .moteur__btn { grid-column: 1 / -1; min-height: 52px; }
  .hero__bas { padding-block: 10px 0; }
  .hero__legende { text-align: center; font-size: .8125rem; margin: 0; color: var(--gris); text-shadow: none; text-wrap: balance; }
  .hero__legende a { border-bottom: 0; }
}
@media (max-width: 379px) { .moteur__champs { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 6px; padding: 8px; } .moteur__champ label { left: 12px; } .moteur__champ .liste-btn, .moteur__champ select { padding-inline: 12px 8px; font-size: .9375rem; } .moteur__chiffres img { display: none; } .moteur__chiffres { gap: 14px; font-size: .75rem; } .moteur__chiffres b { font-size: .875rem; } }
@media (min-width: 620px) { .moteur__champs { grid-template-columns: 1fr 1fr; } .moteur__btn { grid-column: 1 / -1; } }
@media (min-width: 1080px) { .moteur { padding: 22px 24px 24px; } .moteur__champs { grid-template-columns: repeat(4, 1fr) auto; } .moteur__btn { grid-column: auto; padding-inline: 2rem; } }

/* ---------- Bande de confiance ---------- */
.confiance-bande { padding: 8px 0 56px; }
.confiance-bande__t { font: 600 1.625rem var(--main); text-align: center; margin: 0 0 22px; }
.confiance-bande ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 22px 40px; align-items: center; justify-content: center; }
.confiance-bande img { height: 92px; width: auto; transition: transform .25s var(--ease); }
.confiance-bande img.l { height: 52px; }
.confiance-bande li:hover img { transform: translateY(-4px); }
@media (max-width: 639px) { .confiance-bande img { height: 56px; } .confiance-bande img.l { height: 30px; } .confiance-bande ul { gap: 18px 26px; } }
/* « Ils nous font confiance » (20/10/2026) : les écoles en défilement continu, en couleur, qui se lèvent au survol. */
.confiance-ecoles { padding: 48px 0 56px; overflow: hidden; }
.confiance-ecoles__t { font: 600 1.625rem var(--main); text-align: center; margin: 0 0 28px; }
.confiance-ecoles__piste { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.confiance-ecoles__rail { display: flex; width: max-content; animation: confiance-defile 48s linear infinite; }
.confiance-ecoles__piste:hover .confiance-ecoles__rail { animation-play-state: paused; }
.confiance-ecoles ul { list-style: none; margin: 0; padding: 0 28px; display: flex; gap: 56px; align-items: center; }
.confiance-ecoles img { height: 72px; width: auto; max-width: 200px; object-fit: contain; transition: transform .25s var(--ease); }
.confiance-ecoles img.l { height: 48px; }
.confiance-ecoles li:hover img { transform: translateY(-4px); }
@keyframes confiance-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 639px) { .confiance-ecoles img { height: 52px; max-width: 140px; } .confiance-ecoles ul { gap: 36px; padding: 0 18px; } }
@media (prefers-reduced-motion: reduce) {
  .confiance-ecoles__rail { animation: none; width: auto; }
  .confiance-ecoles__rail ul[aria-hidden] { display: none; }
  .confiance-ecoles__piste { -webkit-mask-image: none; mask-image: none; }
  .confiance-ecoles ul { flex-wrap: wrap; justify-content: center; gap: 22px 40px; }
}

/* ---------- Profils : tuiles portrait ---------- */
.profils { display: grid; gap: 20px; }
@media (min-width: 640px) { .profils { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .profils { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.profil { position: relative; display: block; border-radius: var(--r-carte); overflow: hidden; aspect-ratio: 3/4; color: var(--blanc); text-decoration: none; isolation: isolate; }
.profil > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s var(--ease); }
.profil:hover > img { transform: scale(1.06); }
.profil::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 38%, rgba(5, 39, 64, .9)); }
.profil__ico { position: absolute; top: 14px; left: 14px; width: 74px; height: 74px; border-radius: 50%; background: var(--blanc); display: grid; place-items: center; transition: transform .35s var(--ease), background .25s; }
.profil__ico img { width: 56px; height: 56px; object-fit: contain; }
.profil:hover .profil__ico { transform: rotate(-8deg) scale(1.08); background: var(--ambre); }
.profil__txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 20px; display: grid; gap: 6px; }
.profil__txt b { font: 800 1.625rem/1.1 var(--titre); letter-spacing: -.02em; }
.profil__txt small { font-size: .9688rem; line-height: 1.4; opacity: .95; }
.profil__txt i { font-style: normal; font-weight: 700; color: var(--ambre); font-size: .9375rem; margin-top: 4px; }

/* ---------- Zigzag « pourquoi » ---------- */
.zigzag { display: grid; gap: 56px; }
.zz { display: grid; gap: 28px; align-items: center; }
.zz__photo { margin: 0; position: relative; }
.zz__photo > img:first-child { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--r-carte); }
.zz__ico { position: absolute; right: -10px; bottom: -26px; width: 118px; height: 118px; padding: 16px; object-fit: contain; border-radius: 50%; background: var(--blanc); box-shadow: var(--ombre-douce); transition: transform .4s var(--ease); }
.zz:hover .zz__ico { transform: rotate(6deg) scale(1.05); }
.zz__txt { display: grid; gap: 14px; justify-items: start; }
.zz__txt p { margin: 0; font-size: 1.125rem; max-width: 32em; }
@media (min-width: 900px) {
  .zigzag { gap: 88px; }
  .zz { grid-template-columns: 1fr 1fr; gap: 72px; }
  .zz--inverse .zz__photo { order: 2; }
  .zz--inverse .zz__ico { right: auto; left: -30px; }
  .zz__ico { right: -30px; width: 140px; height: 140px; }
}

/* ---------- Tuiles de causes ---------- */
.causes { position: relative; overflow: hidden; }
.tuiles { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .tuiles { grid-template-columns: repeat(4, 1fr); gap: 22px; } }
.tuile { position: relative; display: block; border-radius: var(--r-img); overflow: hidden; aspect-ratio: 4/5; color: var(--blanc); text-decoration: none; isolation: isolate; }
.tuile__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s var(--ease); }
.tuile:hover .tuile__photo { transform: scale(1.07); }
.tuile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 45%, rgba(5, 39, 64, .88)); }
.tuile__ico { position: absolute; top: 12px; right: 12px; width: 62px; height: 62px; border-radius: 50%; background: var(--ambre); display: grid; place-items: center; transition: transform .35s var(--ease); }
.tuile__ico img { width: 46px; height: 46px; object-fit: contain; }
.tuile:hover .tuile__ico { transform: rotate(10deg) scale(1.1); }
.tuile__txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px; display: grid; }
.tuile__txt b { font: 800 1.3125rem/1.15 var(--titre); letter-spacing: -.015em; }
.tuile__txt small { font-size: .9063rem; opacity: .9; }
@media (max-width: 639px) { .tuiles.rail > * { flex: 0 0 62%; } }

/* ---------- Certifications ---------- */
.certifs { display: grid; gap: 18px; }
@media (min-width: 640px) { .certifs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .certifs { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.certif { background: var(--blanc); border-radius: var(--r-carte); padding: 28px 26px; display: grid; gap: 10px; align-content: start; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.certif:hover { transform: translateY(-6px); box-shadow: var(--ombre-douce); }
.certif img { height: 84px; width: auto; max-width: 200px; object-fit: contain; margin-bottom: 8px; }
.certif img.fonce { background: var(--marine); border-radius: 10px; padding: 8px 10px; height: 96px; }
.certif p { margin: 0; font-size: .9688rem; color: var(--gris); }

/* ---------- Témoignages ---------- */
.section--encre .lien-fort { color: var(--blanc); }
.temoins { display: grid; gap: 20px; }
@media (min-width: 900px) { .temoins { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.temoin { margin: 0; background: var(--blanc); color: var(--marine); border-radius: var(--r-carte); padding: 0 24px 26px; display: grid; gap: 14px; align-content: start; margin-top: 44px; position: relative; }
.temoin img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 5px solid var(--ambre); margin-top: -44px; }
.temoin blockquote { margin: 0; font-size: 1.0938rem; line-height: 1.55; }
.temoin blockquote::before { content: "“"; display: block; font: 800 3.5rem/.6 var(--titre); color: var(--ambre-fonce); margin-bottom: 6px; }
.temoin figcaption { display: grid; gap: 2px; font-size: .9375rem; margin-top: auto; }
.temoin figcaption b { font: 700 1.125rem var(--titre); }
.temoin figcaption a { color: var(--gris); }

/* ---------- Guides et récits ---------- */
.guides { display: grid; gap: 32px 24px; }
@media (min-width: 640px) { .guides { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .guides { grid-template-columns: repeat(3, 1fr); gap: 40px 28px; } }
.guide { display: grid; gap: 10px; text-decoration: none; align-content: start; }
.guide__img { position: relative; display: block; border-radius: var(--r-img); overflow: hidden; aspect-ratio: 3/2; }
.guide__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.guide:hover .guide__img img { transform: scale(1.05); }
.guide__rub { position: absolute; left: 12px; bottom: 12px; background: var(--ambre); color: var(--marine-fonce); font-size: .8438rem; font-weight: 700; padding: 5px 13px; border-radius: var(--r-pilule); }
.guide b { font: 700 1.25rem/1.25 var(--titre); letter-spacing: -.012em; text-wrap: pretty; }
.guide:hover b { text-decoration: underline; text-decoration-color: var(--ambre); text-decoration-thickness: 3px; }
.guide time { font-size: .9063rem; color: var(--gris); }

/* Sur mobile, les longues séries deviennent des rails à faire glisser (défilement natif) */
@media (max-width: 639px) {
  .profils.rail, .temoins.rail, .guides { display: flex; }
  .guides { gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gouttiere)); padding: 0 var(--gouttiere) 12px; scrollbar-width: none; }
  .guides > * { flex: 0 0 80%; scroll-snap-align: center; }
  .profils.rail > * { flex: 0 0 76%; }
  .tuiles.rail { display: grid; overflow: visible; margin-inline: 0; padding: 0; }
  .temoins.rail { padding-top: 8px; align-items: stretch; }
  .temoins.rail > * { flex: 0 0 86%; }
  .mega li img, .menu details img { width: 40px; height: 40px; }
}
@media (min-width: 1080px) { .mega li img { width: 46px; height: 46px; } }