/* =========================================================================
   OCSIA2 — feuille de style du site public
   Les couleurs, polices et tailles viennent de /theme.css (charte graphique).
   Chaque site ajoute son habillage dans assets/site/habillage.css.
   ========================================================================= */

/* Valeurs de secours seulement : « :where » leur donne une priorité nulle, pour que /theme.css (chargé avant)
   l'emporte toujours. Avant le 12/10/2026, ce bloc écrasait la charte du client (couleurs, polices, tailles). */
:where(:root) {
  --c-primaire: #4b176f; --c-secondaire: #c9a24d; --c-accent: #7d5f17; --c-fond: #fbfaf6; --c-surface: #fff; --c-texte: #24152b; --c-doux: #5e5468;
  --c-primaire-txt: #fff; --c-secondaire-txt: #111;
  --police-titres: ui-serif, Georgia, serif; --police-texte: system-ui, sans-serif;
  --taille-base: 1.125rem; --rayon: 10px; --largeur: 1200px; --densite: 1;
  --t-xs: .64rem; --t-s: .8rem; --t-m: 1rem; --t-l: 1.25rem; --t-xl: 1.56rem; --t-xxl: clamp(1.4rem, 1.2rem + 1.5vw, 1.95rem); --t-xxxl: clamp(1.8rem, 1.4rem + 2vw, 2.44rem); --t-h1: clamp(2.2rem, 1.6rem + 3vw, 3.05rem); --t-geant: clamp(2.6rem, 1.8rem + 4.5vw, 3.8rem);
  --espace: calc(clamp(3rem, 2rem + 4vw, 6rem) * var(--densite));
  --marge: clamp(1rem, .5rem + 2.5vw, 2.5rem);
  --bordure: color-mix(in srgb, var(--c-texte) 14%, transparent);
  --ombre: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .06);
  --transition: 180ms cubic-bezier(.2, .7, .2, 1);
  color-scheme: light dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
body { margin: 0; background: var(--c-fond); color: var(--c-texte); font-family: var(--police-texte); font-size: var(--taille-base); line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, picture, video, svg, model-viewer { display: block; max-width: 100%; height: auto; }
picture img { width: 100%; }
h1, h2, h3, h4 { font-family: var(--police-titres); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-xxxl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-l); }
p, ul, ol, blockquote, figure, dl { margin: 0 0 1em; }
p { text-wrap: pretty; }
a { color: var(--c-primaire); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--c-secondaire) 45%, transparent); }
hr, .separateur { border: 0; border-top: 1px solid var(--bordure); margin: 2rem 0; }
code { font-family: ui-monospace, monospace; font-size: .9em; }
small { font-size: var(--t-s); }

.visuellement-cache { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lien-evitement { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--c-texte); color: var(--c-fond); padding: .6rem 1rem; border-radius: var(--rayon); }
.lien-evitement:focus { top: 1rem; }
.piege { position: absolute !important; left: -9999px; }
.icone { width: 1.25em; height: 1.25em; flex: none; }
.cache-mobile { } .cache-ordi { }
@media (max-width: 760px) { .cache-mobile { display: none !important; } }
@media (min-width: 761px) { .cache-ordi { display: none !important; } }

/* ---------- Boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 44px; padding: .7em 1.35em; border-radius: var(--rayon); border: 2px solid transparent; font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform var(--transition), background var(--transition), box-shadow var(--transition); }
.bouton:hover { transform: translateY(-1px); }
.bouton:active { transform: translateY(0); }
.bouton--principal { background: var(--c-primaire); color: var(--c-primaire-txt); }
.bouton--principal:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--c-primaire) 35%, transparent); }
.bouton--secondaire, .bouton--contour { background: transparent; color: var(--c-primaire); border-color: currentColor; }
.bouton--lien { background: none; border: 0; padding: .3em 0; min-height: 0; color: var(--c-primaire); text-decoration: underline; }
.bouton--danger { background: #b42318; color: #fff; }
.boutons { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.boutons.a-centre { justify-content: center; } .boutons.a-droite { justify-content: flex-end; }
.lien { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- En-tête et menus ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--c-fond) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--bordure); }
.entete__in { max-width: var(--largeur); margin: 0 auto; padding: .6rem var(--marge); display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--c-texte); font-family: var(--police-titres); font-weight: 700; font-size: var(--t-l); margin-right: auto; }
.logo__img img, .logo picture img { max-height: 44px; width: auto; }
.nav__liste { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; align-items: center; }
.nav__liste a, .nav__groupe summary { display: inline-flex; align-items: center; gap: .4em; padding: .55rem .8rem; min-height: 44px; border-radius: var(--rayon); color: var(--c-texte); text-decoration: none; font-weight: 500; cursor: pointer; }
.nav__liste a:hover, .nav__groupe summary:hover { background: color-mix(in srgb, var(--c-texte) 6%, transparent); }
.nav__liste a[aria-current="page"] { color: var(--c-primaire); box-shadow: inset 0 -2px 0 var(--c-primaire); }
.nav__liste a.bouton { color: var(--c-primaire-txt); }
.nav__groupe { position: relative; } .nav__groupe summary { list-style: none; } .nav__groupe summary::-webkit-details-marker { display: none; }
.nav__groupe summary::after { content: "▾"; font-size: .8em; }
.nav__groupe ul { position: absolute; top: 100%; left: 0; min-width: 14rem; list-style: none; margin: .25rem 0 0; padding: .4rem; background: var(--c-surface); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); }
.nav__groupe ul a { display: flex; width: 100%; }
.entete__outils { display: flex; align-items: center; gap: .25rem; }
.entete__outils > a, .bouton-theme, .bouton-menu, .langues summary { display: inline-flex; align-items: center; gap: .3em; justify-content: center; min-width: 44px; min-height: 44px; border-radius: var(--rayon); background: none; border: 0; color: var(--c-texte); cursor: pointer; font: inherit; list-style: none; }
.langues { position: relative; } .langues summary::-webkit-details-marker { display: none; }
.langues ul { position: absolute; right: 0; top: 100%; list-style: none; padding: .4rem; margin: .25rem 0 0; background: var(--c-surface); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); min-width: 10rem; }
.langues ul a { display: block; padding: .5rem .75rem; text-decoration: none; color: var(--c-texte); border-radius: 6px; }
.entete__panier { position: relative; }
.panier-nb { position: absolute; top: 4px; right: 2px; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 1rem; background: var(--c-accent); color: #fff; font-size: .7rem; display: grid; place-items: center; }
.bouton-menu { display: none; }
@media (max-width: 900px) {
  .bouton-menu { display: inline-flex; }
  .nav { position: fixed; inset: 64px 0 auto 0; max-height: calc(100dvh - 64px); overflow: auto; background: var(--c-fond); border-bottom: 1px solid var(--bordure); padding: 1rem var(--marge) 2rem; transform: translateY(-110%); visibility: hidden; transition: transform var(--transition), visibility var(--transition); }
  .nav.ouvert { transform: none; visibility: visible; }
  .nav__liste { flex-direction: column; align-items: stretch; }
  .nav__liste a, .nav__groupe summary { font-size: var(--t-l); }
  .nav__groupe ul { position: static; box-shadow: none; border: 0; padding-left: 1rem; }
}
/* Style centré */
.menu-centre .entete__in { flex-wrap: wrap; justify-content: center; }
.menu-centre .logo { margin: 0 auto; width: 100%; justify-content: center; }
@media (min-width: 901px) { .menu-centre .nav { width: 100%; display: flex; justify-content: center; } .menu-centre .entete__outils { position: absolute; right: var(--marge); top: .6rem; } }
/* Style latéral : le menu glisse depuis le côté, à toutes les tailles */
.menu-lateral .bouton-menu { display: inline-flex; }
.menu-lateral .nav { position: fixed; inset: 0 0 0 auto; width: min(24rem, 88vw); background: var(--c-surface); box-shadow: -10px 0 40px rgb(0 0 0 / .15); padding: 5rem 1.5rem 2rem; transform: translateX(105%); visibility: hidden; transition: transform var(--transition), visibility var(--transition); z-index: 60; }
.menu-lateral .nav.ouvert { transform: none; visibility: visible; }
.menu-lateral .nav__liste { flex-direction: column; align-items: stretch; }
.menu-lateral .nav__liste a { font-family: var(--police-titres); font-size: var(--t-xl); }
/* Style palette : un champ qui cherche partout (⌘K) */
.palette-bouton { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: .4rem .9rem; border: 1px solid var(--bordure); border-radius: 999px; background: var(--c-surface); color: var(--c-doux); font: inherit; cursor: pointer; flex: 1; max-width: 26rem; }
.palette-bouton kbd { margin-left: auto; font-size: .75rem; border: 1px solid var(--bordure); border-radius: 4px; padding: 0 .35rem; }
.menu-palette .nav { display: none; }
.menu-palette .bouton-menu { display: none; }
.palette { width: min(40rem, 94vw); max-height: 70dvh; border: 0; border-radius: calc(var(--rayon) * 1.5); padding: 0; background: var(--c-surface); color: var(--c-texte); box-shadow: 0 30px 80px rgb(0 0 0 / .35); }
.palette::backdrop { background: rgb(0 0 0 / .35); backdrop-filter: blur(4px); }
.palette input { width: 100%; border: 0; border-bottom: 1px solid var(--bordure); padding: 1.1rem 1.25rem; font: inherit; font-size: var(--t-l); background: transparent; color: inherit; }
.palette input:focus { outline: none; }
.palette__liste { list-style: none; margin: 0; padding: .5rem; overflow: auto; max-height: 55dvh; }
.palette__liste a { display: block; padding: .7rem .9rem; border-radius: var(--rayon); text-decoration: none; color: var(--c-texte); }
.palette__liste a:hover, .palette__liste a[aria-selected="true"] { background: color-mix(in srgb, var(--c-primaire) 10%, transparent); }
.palette__liste small { display: block; color: var(--c-doux); }
.palette__vide { padding: 1rem 1.25rem; color: var(--c-doux); }
/* Style dock : barre flottante en bas, comme une application */
@media (max-width: 900px) {
  .menu-dock .bouton-menu { display: none; }
  .menu-dock .nav { position: fixed; inset: auto 50% calc(.8rem + env(safe-area-inset-bottom)) auto; transform: translateX(50%); visibility: visible; width: auto; max-width: 94vw; padding: .35rem; border-radius: 999px; background: color-mix(in srgb, var(--c-surface) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 40px rgb(0 0 0 / .2); border: 1px solid var(--bordure); overflow-x: auto; }
  .menu-dock .nav__liste { flex-direction: row; }
  .menu-dock .nav__liste a { flex-direction: column; gap: .1rem; font-size: .72rem; padding: .4rem .8rem; border-radius: 999px; white-space: nowrap; }
  .menu-dock main { padding-bottom: 5rem; }
}

/* ---------- Blocs ---------- */
.bloc { position: relative; padding-block: var(--espace); isolation: isolate; }
.bloc__in { max-width: var(--largeur); margin: 0 auto; padding-inline: var(--marge); }
.bloc + .bloc:not([class*="fond-"]) { padding-top: calc(var(--espace) * .5); }
.espace-s { padding-block: calc(var(--espace) * .4); } .espace-m { padding-block: calc(var(--espace) * .7); } .espace-l { padding-block: var(--espace); } .espace-xl { padding-block: calc(var(--espace) * 1.6); } .espace-0 { padding-block: 0; }
.largeur-etroit .bloc__in, .bloc__in.largeur-etroit { max-width: 46rem; } .largeur-large .bloc__in { max-width: calc(var(--largeur) + 200px); } .largeur-plein .bloc__in { max-width: none; padding-inline: 0; }
.align-centre { text-align: center; } .align-centre .boutons { justify-content: center; } .align-centre .section-titre, .align-centre .riche { margin-inline: auto; }
.hauteur-ecran { min-height: 100dvh; display: grid; align-items: center; } .hauteur-grande { min-height: 75dvh; display: grid; align-items: center; }
.bordure-haut { border-top: 1px solid var(--bordure); } .bordure-bas { border-bottom: 1px solid var(--bordure); }
.bloc__fond { position: absolute; inset: 0; z-index: -1; } .bloc__fond img { width: 100%; height: 100%; object-fit: cover; } .bloc__fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .25), rgb(0 0 0 / .55)); }
.bloc:has(.bloc__fond) { color: #fff; } .bloc:has(.bloc__fond) a:not(.bouton) { color: inherit; }
[class*="fond-"] { color: inherit; }
.texte-clair { color: #fff; } .texte-clair a:not(.bouton) { color: inherit; }
/* Petit texte d'appui, facultatif et vide par défaut : pas de capitales espacées « par défaut » (un tic des sites générés). */
.surtitre { font-size: var(--t-s); font-weight: 600; color: var(--c-doux, var(--c-primaire)); margin-bottom: .6rem; }
.section-titre { max-width: 46rem; margin-bottom: 2rem; }
.riche { max-width: 70ch; } .riche > :last-child { margin-bottom: 0; }
.align-centre .riche { margin-inline: auto; }
.riche blockquote { border-left: 4px solid var(--c-secondaire); margin-left: 0; padding-left: 1.25rem; font-style: italic; }
.riche ul.liste-coches, .riche ul.liste-fleches { list-style: none; padding-left: 0; }
.riche ul.liste-coches li::before { content: "✓"; color: var(--c-primaire); font-weight: 700; margin-right: .6rem; }
.riche ul.liste-fleches li::before { content: "→"; color: var(--c-primaire); margin-right: .6rem; }
.lettrine::first-letter { float: left; font-family: var(--police-titres); font-size: 3.6em; line-height: .8; margin: .08em .1em 0 0; color: var(--c-primaire); }
.encadre { background: color-mix(in srgb, var(--c-secondaire) 18%, transparent); border-radius: var(--rayon); padding: 1rem 1.25rem; }
.note { color: var(--c-doux); font-size: var(--t-s); }
.deux-colonnes { columns: 2 20rem; column-gap: 3rem; max-width: none; }
.media img { border-radius: var(--rayon); }
.taille-s { max-width: 240px; } .taille-m { max-width: 420px; } .taille-l { max-width: 720px; } .taille-plein { max-width: none; }
.align-centre .media { margin-inline: auto; }
/* Mise en forme des textes (barre d'édition) */
.a-gauche { text-align: left; } .a-centre { text-align: center; } .a-droite { text-align: right; } .a-justifie { text-align: justify; hyphens: auto; }
.t-xs { font-size: var(--t-xs); } .t-s { font-size: var(--t-s); } .t-m { font-size: var(--t-m); } .t-l { font-size: var(--t-l); } .t-xl { font-size: var(--t-xl); } .t-xxl { font-size: var(--t-xxl); } .t-xxxl { font-size: var(--t-xxxl); }
.g-300 { font-weight: 300; } .g-400 { font-weight: 400; } .g-500 { font-weight: 500; } .g-600 { font-weight: 600; } .g-700 { font-weight: 700; } .g-800 { font-weight: 800; }
.i-oui { font-style: italic; } .maj { text-transform: uppercase; letter-spacing: .06em; } .souligne { text-decoration: underline; } .barre { text-decoration: line-through; }
mark { background: color-mix(in srgb, var(--c-secondaire) 55%, transparent); color: inherit; padding: 0 .15em; border-radius: 3px; }

/* Hero */
.hero { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.hero__titre { font-size: var(--t-geant); }
.hero__intro { font-size: var(--t-l); color: var(--c-doux); }
.v-centre .hero { text-align: center; justify-items: center; } .v-centre .hero .boutons { justify-content: center; } .v-centre .hero__intro { margin-inline: auto; }
.v-centre .hero .media { width: 100%; margin-top: 1rem; }
@media (min-width: 900px) { .v-scinde .hero { grid-template-columns: 1.05fr 1fr; } }
.v-scinde .hero .media img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(var(--rayon) * 2); }
.bloc--hero.v-plein { padding: 0; min-height: min(92dvh, 900px); display: grid; color: #fff; }
.v-plein .bloc__in { display: grid; align-items: end; padding-block: calc(var(--espace) * 1.2); width: 100%; }
.v-plein .hero { position: relative; } .v-plein .hero__intro { color: rgb(255 255 255 / .9); }
.v-plein .hero .media { position: absolute; inset: calc(-1 * var(--espace) * 1.2) calc(-1 * var(--marge)); z-index: -1; height: calc(100% + var(--espace) * 2.4); max-width: none; }
.v-plein .hero .media img, .v-plein .hero .media picture { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.v-plein .hero .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 0 0 / .65), rgb(0 0 0 / .1) 60%); }
.v-plein .surtitre { color: var(--c-secondaire); }
.v-plein .bouton--secondaire { color: #fff; }
.v-minimal .hero__titre { font-size: var(--t-h1); max-width: 18ch; }

/* En-tête de page */
.entete-page { max-width: 52rem; }
.v-couverture .entete-page, .v-magazine .entete-page { max-width: none; }
.entete-page__resume { font-size: var(--t-l); color: var(--c-doux); max-width: 46rem; }
.entete-page__date { color: var(--c-doux); font-size: var(--t-s); }
.entete-page .media { margin-top: 2rem; } .entete-page .media img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.v-magazine .entete-page { display: grid; gap: 2rem; } @media (min-width: 900px) { .v-magazine .entete-page { grid-template-columns: 1fr 1fr; align-items: end; } .v-magazine .entete-page .media { grid-row: 1 / 5; grid-column: 2; margin: 0; } .v-magazine .entete-page .media img { aspect-ratio: 3 / 4; } }

/* Texte + image */
.texte-image { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
@media (min-width: 900px) { .v-droite .texte-image, .v-gauche .texte-image { grid-template-columns: 1fr 1fr; } .v-gauche .texte-image .media { order: -1; } }
.texte-image .media img { border-radius: calc(var(--rayon) * 1.5); }
.v-superpose .texte-image { position: relative; } .v-superpose .texte-image__texte { position: relative; z-index: 1; background: var(--c-surface); padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--rayon); box-shadow: var(--ombre); max-width: 36rem; margin-top: -6rem; margin-inline: auto; }
.v-superpose .texte-image .media { order: -1; }

/* Section libre (colonnes et éléments) */
.libre { display: grid; gap: clamp(1.25rem, 3vw, 3rem); }
@media (min-width: 760px) {
  .colonnes-1-1 { grid-template-columns: 1fr 1fr; } .colonnes-2-1 { grid-template-columns: 2fr 1fr; } .colonnes-1-2 { grid-template-columns: 1fr 2fr; }
  .colonnes-1-1-1 { grid-template-columns: repeat(3, 1fr); } .colonnes-1-1-1-1 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) { .colonnes-1-1-1-1 { grid-template-columns: repeat(4, 1fr); } }
.colonne { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.el { min-width: 0; } .el > :last-child { margin-bottom: 0; }
.el.align-centre { text-align: center; } .el.align-droite { text-align: right; }
.el.fond-carte, .el--carte .carte { background: var(--c-surface); border-radius: var(--rayon); padding: 1.25rem; box-shadow: var(--ombre); }
.el.arrondi-rond img { border-radius: 50%; } .el.ombre-oui { box-shadow: var(--ombre); border-radius: var(--rayon); }
.el-icone { display: flex; align-items: center; gap: .6rem; font-weight: 600; } .el-icone__pic .icone { width: 1.75rem; height: 1.75rem; color: var(--c-primaire); }
.ajouts--haut { margin-bottom: 1.5rem; } .ajouts--bas { margin-top: 1.5rem; }

/* Cartes */
.cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.carte { position: relative; background: var(--c-surface); border-radius: calc(var(--rayon) * 1.4); padding: clamp(1.25rem, 2.5vw, 2rem); box-shadow: var(--ombre); border: 1px solid var(--bordure); transition: transform var(--transition), box-shadow var(--transition); }
.carte:has(.carte__lien):hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgb(0 0 0 / .1); }
.carte__img img { border-radius: var(--rayon); aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 1rem; }
.carte__icone { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: color-mix(in srgb, var(--c-primaire) 12%, transparent); color: var(--c-primaire); margin-bottom: 1rem; }
.carte__titre { font-size: var(--t-l); }
.carte__lien { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 1rem; color: var(--c-primaire); }
.v-liste .cartes { grid-template-columns: 1fr; } .v-liste .carte { display: grid; grid-template-columns: auto 1fr; gap: 1rem; box-shadow: none; }
@media (min-width: 900px) { .v-bento .cartes { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(12rem, auto); } .v-bento .carte:nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; } .v-bento .carte:nth-child(5n + 4) { grid-column: span 2; } }
.v-defilement .cartes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; } .v-defilement .carte { flex: 0 0 min(80%, 20rem); scroll-snap-align: start; }

/* Étapes */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; counter-reset: etape; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.etape { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.etape__num { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--c-primaire); color: var(--c-primaire-txt); font-weight: 700; font-family: var(--police-titres); }
.v-frise .etapes { grid-template-columns: 1fr; border-left: 2px solid var(--bordure); padding-left: 1.5rem; } .v-frise .etape__num { margin-left: -2.9rem; }
.v-chemin .etapes { grid-template-columns: 1fr; max-width: 40rem; } .v-chemin .etape:nth-child(even) { margin-left: auto; text-align: right; grid-template-columns: 1fr auto; } .v-chemin .etape:nth-child(even) .etape__num { order: 2; }

/* Chiffres */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 1.5rem; margin: 0; }
.chiffres .chiffre { display: flex; flex-direction: column-reverse; }
.chiffres dd { margin: 0; } .chiffre__valeur { font-family: var(--police-titres); font-size: var(--t-xxxl); font-weight: 700; color: var(--c-primaire); line-height: 1; }
.chiffres dt { color: var(--c-doux); }
.v-grand .chiffre__valeur { font-size: var(--t-geant); }

/* Galerie */
.galerie { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.galerie figure { margin: 0; } .galerie img { aspect-ratio: 1; object-fit: cover; border-radius: var(--rayon); }
.galerie figcaption { font-size: var(--t-s); color: var(--c-doux); margin-top: .35rem; }
.v-mosaique .galerie { columns: 3 14rem; display: block; } .v-mosaique .galerie li { break-inside: avoid; margin-bottom: .75rem; } .v-mosaique .galerie img { aspect-ratio: auto; }
.v-carrousel .galerie { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } .v-carrousel .galerie li { flex: 0 0 min(85%, 34rem); scroll-snap-align: center; } .v-carrousel .galerie img { aspect-ratio: 4 / 3; }
.v-pleine .galerie { grid-template-columns: 1fr; } .v-pleine .galerie img { aspect-ratio: auto; }

/* Vidéo (façade : rien ne charge avant le clic) */
.video-facade__bouton { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #000; border-radius: var(--rayon); overflow: hidden; cursor: pointer; aspect-ratio: 16 / 9; }
.video-facade__bouton img, .video-facade__bouton picture { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.video-facade__vide { position: absolute; inset: 0; background: linear-gradient(135deg, var(--c-primaire), var(--c-texte)); }
.video-facade__play { position: absolute; inset: 0; margin: auto; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: rgb(255 255 255 / .92); }
.video-facade__play::after { content: ""; position: absolute; left: 1.8rem; top: 1.35rem; border-left: 1.4rem solid var(--c-texte); border-top: .9rem solid transparent; border-bottom: .9rem solid transparent; }
.video-facade__note { font-size: var(--t-xs); color: var(--c-doux); margin-top: .4rem; }
.video-facade iframe, .video video { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--rayon); }

/* Objet 3D */
.objet3d { display: grid; gap: 2rem; align-items: center; } @media (min-width: 900px) { .v-cote .objet3d { grid-template-columns: 1fr 1.3fr; } }
.objet3d__scene model-viewer { width: 100%; height: clamp(320px, 55vh, 620px); background: radial-gradient(circle at 50% 40%, var(--c-surface), color-mix(in srgb, var(--c-texte) 6%, var(--c-fond))); border-radius: calc(var(--rayon) * 1.5); --poster-color: transparent; }

/* Citation */
.citation { margin: 0; max-width: 46rem; } .citation blockquote { margin: 0; font-family: var(--police-titres); font-size: var(--t-xl); line-height: 1.35; }
.v-grande .citation blockquote { font-size: var(--t-xxxl); } .citation figcaption { margin-top: 1rem; display: flex; flex-direction: column; }
.citation__auteur { font-weight: 700; } .citation__role { color: var(--c-doux); font-size: var(--t-s); }
.citation__photo img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; }
.align-centre .citation { margin-inline: auto; } .align-centre .citation__photo img { margin-inline: auto; }

/* Avis */
.avis { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.avis__carte { background: var(--c-surface); border-radius: var(--rayon); padding: 1.5rem; border: 1px solid var(--bordure); }
.avis__note { color: #c58a00; letter-spacing: .1em; } .avis__auteur { font-weight: 700; margin: 0; } .avis__meta { font-size: var(--t-xs); color: var(--c-doux); margin: 0; }
.avis blockquote { margin: 0 0 1rem; }

/* FAQ */
.faq { max-width: 52rem; } .align-centre .faq { margin-inline: auto; text-align: left; }
.faq__item { border-bottom: 1px solid var(--bordure); }
.faq__item summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; cursor: pointer; font-weight: 600; font-size: var(--t-l); list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 1.4em; line-height: 1; color: var(--c-primaire); transition: transform var(--transition); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item .riche { padding-bottom: 1.25rem; }
.v-deux .faq { max-width: none; columns: 2 22rem; column-gap: 3rem; } .v-deux .faq__item { break-inside: avoid; }

/* Équipe */
.equipe { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.personne__photo img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rayon); margin-bottom: 1rem; }
.personne__role { color: var(--c-doux); margin-top: -.4rem; }

/* Tarifs */
.tarifs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); align-items: stretch; }
.tarif { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--bordure); border-radius: calc(var(--rayon) * 1.4); padding: 2rem; }
.tarif--avant { border: 2px solid var(--c-primaire); box-shadow: var(--ombre); }
.tarif__prix { font-family: var(--police-titres); font-size: var(--t-xxxl); font-weight: 700; margin: .25rem 0 1rem; } .tarif__periode { font-size: var(--t-m); color: var(--c-doux); font-weight: 400; }
.tarif__inclus { flex: 1; } .tarif .bouton { margin-top: 1.5rem; }
.tarifs__note { margin-top: 1.5rem; color: var(--c-doux); font-size: var(--t-s); }

/* Appel à l'action */
.appel { max-width: 46rem; } .align-centre .appel, .v-bandeau .appel { margin-inline: auto; text-align: center; } .v-bandeau .appel .boutons { justify-content: center; }
.bloc--appel.v-bandeau { background: var(--c-primaire); color: var(--c-primaire-txt); } .v-bandeau .bouton--principal { background: var(--c-secondaire); color: var(--c-secondaire-txt); } .v-bandeau .bouton--secondaire { color: inherit; }
.v-carte .appel { background: var(--c-surface); border-radius: calc(var(--rayon) * 2); padding: clamp(2rem, 5vw, 4rem); box-shadow: var(--ombre); max-width: 52rem; margin-inline: auto; }
.appel__ps { margin-top: 2rem; font-style: italic; }

/* Articles */
.articles { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.article-carte { position: relative; } .article-carte img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rayon); margin-bottom: 1rem; }
.article-carte h3 a { color: var(--c-texte); text-decoration: none; } .article-carte h3 a::after { content: ""; position: absolute; inset: 0; }
.article-carte__date { color: var(--c-doux); font-size: var(--t-s); margin-bottom: .25rem; }
.v-liste .articles { grid-template-columns: 1fr; gap: 1rem; } .v-liste .article-carte { border-bottom: 1px solid var(--bordure); padding-bottom: 1rem; } .v-liste .article-carte .media { display: none; }
@media (min-width: 900px) { .v-une .articles { grid-template-columns: 2fr 1fr 1fr; } .v-une .article-carte:first-child { grid-row: span 2; } }

/* Formulaires */
.bloc-formulaire { display: grid; gap: 2rem; } @media (min-width: 900px) { .v-cote .bloc-formulaire { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.v-carte .bloc-formulaire__champ { background: var(--c-surface); padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: calc(var(--rayon) * 1.5); box-shadow: var(--ombre); }
.formulaire { display: grid; gap: 1.1rem; max-width: 40rem; }
.formulaire fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 1.1rem; min-width: 0; }
.formulaire [hidden] { display: none; } /* étapes suivantes, champs conditionnels, formulaire envoyé */
.formulaire legend { font-weight: 600; margin-bottom: .5rem; padding: 0; }
.champ { display: grid; gap: .35rem; }
.champ label, .champ > fieldset > legend { font-weight: 600; }
.champ__aide { color: var(--c-doux); font-size: var(--t-s); margin: 0; }
.requis { color: var(--c-accent); }
input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), select, textarea { width: 100%; min-height: 48px; padding: .7rem .9rem; border: 1.5px solid color-mix(in srgb, var(--c-texte) 25%, transparent); border-radius: calc(var(--rayon) * .8); background: var(--c-surface); color: var(--c-texte); font: inherit; font-size: max(16px, 1rem); transition: border-color var(--transition), box-shadow var(--transition); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-primaire); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primaire) 18%, transparent); }
textarea { min-height: 8rem; resize: vertical; }
[aria-invalid="true"] { border-color: #b42318 !important; }
.champ__erreur { color: #b42318; font-size: var(--t-s); font-weight: 600; margin: 0; }
.case { display: flex; gap: .65rem; align-items: flex-start; cursor: pointer; line-height: 1.4; min-height: 44px; padding-block: .3rem; }
.case input { width: 1.25rem; height: 1.25rem; margin-top: .1rem; accent-color: var(--c-primaire); flex: none; }
.case--carte { border: 1.5px solid var(--bordure); border-radius: var(--rayon); padding: .8rem 1rem; } .case--carte:has(input:checked) { border-color: var(--c-primaire); background: color-mix(in srgb, var(--c-primaire) 6%, transparent); }
.case--carte small { display: block; color: var(--c-doux); font-weight: 400; }
.echelle { display: flex; gap: .5rem; flex-wrap: wrap; }
.echelle label { position: relative; } .echelle input { position: absolute; opacity: 0; }
.echelle span { display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid var(--bordure); border-radius: 50%; cursor: pointer; font-weight: 600; transition: all var(--transition); }
.echelle input:checked + span { background: var(--c-primaire); color: var(--c-primaire-txt); border-color: var(--c-primaire); }
.echelle input:focus-visible + span { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.echelle__legendes { display: flex; justify-content: space-between; font-size: var(--t-s); color: var(--c-doux); margin: .2rem 0 0; }
input[type="range"] { width: 100%; accent-color: var(--c-primaire); }
.formulaire__progression { display: grid; gap: .3rem; font-size: var(--t-s); color: var(--c-doux); } .formulaire__progression progress { width: 100%; accent-color: var(--c-primaire); }
.formulaire__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.formulaire__message { padding: .9rem 1rem; border-radius: var(--rayon); background: color-mix(in srgb, var(--c-primaire) 10%, transparent); font-weight: 600; }
.formulaire__message.erreur { background: #fde8e7; color: #8f1c13; }
.formulaire__mention { font-size: var(--t-xs); color: var(--c-doux); }
.champ-produit { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; } .champ-produit__img img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.champ-produit input[type="number"] { max-width: 6rem; }
.champ-produit__barre { color: var(--c-doux); font-size: .9em; } .champ-produit__places { margin: .25rem 0 0; font-size: .9em; font-weight: 600; color: var(--c-primaire); }
.champ-produit__nom { margin: 0; }
.choix-paiement__test, .formulaire-apercu { margin: .4rem 0 0; padding: .5rem .75rem; border-radius: 8px; border: 1px dashed currentColor; font-size: .9em; }
.formulaire-apercu { margin-bottom: 1rem; }
.suivi-reprendre { margin: 1rem 0; }
.champ--demi { display: inline-grid; width: calc(50% - .6rem); }
.choix-paiement { display: grid; gap: .6rem; }

/* Contact */
.contact { display: grid; gap: clamp(2rem, 5vw, 4rem); } @media (min-width: 900px) { .v-cote .contact { grid-template-columns: 1fr 1.2fr; } }
.coordonnees { list-style: none; padding: 0; display: grid; gap: .9rem; } .coordonnees li { display: flex; gap: .75rem; align-items: flex-start; } .coordonnees .icone { color: var(--c-primaire); margin-top: .2rem; }

/* Réseaux */
.reseaux { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.reseaux a { display: inline-flex; align-items: center; gap: .5rem; min-width: 44px; min-height: 44px; justify-content: center; text-decoration: none; color: inherit; }
.reseau-pastille { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1.5px solid currentColor; font-weight: 700; font-size: .9rem; }
.reseaux--boutons a { border: 1px solid var(--bordure); border-radius: 999px; padding: .3rem 1rem .3rem .3rem; }
.reseau-pastille--icone svg { width: 1.15rem; height: 1.15rem; } /* icônes dessinées des réseaux (Contenu/IconesReseaux) */
.reseau-pastille { transition: background-color var(--transition); } .reseaux a:hover .reseau-pastille { background: color-mix(in srgb, currentColor 12%, transparent); }

/* Espaces */
.bloc--espace { padding: 0; } .v-petit .espace { height: 2rem; } .v-grand .espace { height: 6rem; } .vague { width: 100%; height: 60px; color: var(--c-surface); }

/* Boutique */
.produits { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.produit-carte { display: flex; flex-direction: column; gap: .4rem; } .produit-carte__lien { color: inherit; text-decoration: none; }
.produit-carte img { aspect-ratio: 1; object-fit: cover; border-radius: var(--rayon); margin-bottom: .6rem; transition: transform var(--transition); } .produit-carte__lien:hover img { transform: scale(1.02); }
.produit-carte h3 { font-size: var(--t-l); margin: 0; } .produit-carte__prix { font-weight: 700; margin: 0; } .produit-carte__prix s { color: var(--c-doux); font-weight: 400; } .produit-carte__epuise { color: var(--c-doux); font-weight: 600; }
.produit-fiche { display: grid; gap: clamp(2rem, 5vw, 4rem); } @media (min-width: 900px) { .produit-fiche { grid-template-columns: 1.1fr 1fr; align-items: start; } .produit-fiche__infos { position: sticky; top: 6rem; } }
.produit-fiche__visuels { display: grid; gap: 1rem; } .produit-fiche__visuels img { border-radius: var(--rayon); }
.produit-fiche__3d { width: 100%; height: 60vh; border-radius: var(--rayon); background: var(--c-surface); }
.produit-fiche__prix { font-size: var(--t-xxl); font-weight: 700; margin: 0; } .produit-fiche__tva { color: var(--c-doux); font-size: var(--t-s); }
.produit-fiche__achat { margin-top: 1.5rem; }
.tableau { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; } .tableau th, .tableau td { text-align: left; padding: .75rem .5rem; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.tableau input[type="number"] { max-width: 5rem; min-height: 40px; }
.en-ligne { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .en-ligne input:not([type="checkbox"]) { width: auto; flex: 1; min-width: 8rem; }
.alerte { padding: 1rem 1.25rem; border-radius: var(--rayon); background: color-mix(in srgb, var(--c-secondaire) 20%, transparent); margin-bottom: 1rem; }
.alerte--erreur { background: #fde8e7; color: #8f1c13; }
.statut { display: inline-block; padding: .3rem .8rem; border-radius: 999px; background: color-mix(in srgb, var(--c-primaire) 12%, transparent); font-weight: 600; }
.liste-simple { padding-left: 1.2rem; } .liste-resultats { list-style: none; padding: 0; } .liste-resultats li { padding: 1rem 0; border-bottom: 1px solid var(--bordure); }
.recherche-form { display: flex; gap: .5rem; max-width: 34rem; margin: 1.5rem 0; } .align-centre .recherche-form, .v-centre .recherche-form { margin-inline: auto; }

/* Résultats de quiz */
.resultat-barres { list-style: none; padding: 0; display: grid; gap: 1rem; margin: 2rem 0; }
.resultat-barres li { display: grid; grid-template-columns: 1fr auto; gap: .35rem .75rem; align-items: center; }
.resultat-barres__barre { grid-column: 1 / -1; height: .75rem; background: color-mix(in srgb, var(--c-primaire) 14%, transparent); border-radius: 999px; overflow: hidden; }
.resultat-barres__barre span { display: block; height: 100%; background: var(--c-primaire); border-radius: inherit; }
.resultat-barres details { grid-column: 1 / -1; font-size: var(--t-s); }

/* Pied de page */
.pied { background: color-mix(in srgb, var(--c-texte) 4%, var(--c-fond)); border-top: 1px solid var(--bordure); margin-top: var(--espace); }
.pied__in { max-width: var(--largeur); margin: 0 auto; padding: 3rem var(--marge) 2rem; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.pied__nom { font-family: var(--police-titres); font-size: var(--t-l); font-weight: 700; }
.pied address { font-style: normal; display: grid; gap: .3rem; color: var(--c-doux); } .pied address a { color: inherit; }
.pied__liens { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; } .pied__liens a, .pied__liens .lien { color: var(--c-doux); font-size: var(--t-s); }
.pied__propulse { grid-column: 1 / -1; font-size: var(--t-xs); color: var(--c-doux); border-top: 1px solid var(--bordure); padding-top: 1.25rem; margin: 0; }

/* Bandeau cookies et chatbot */
.cookies { position: fixed; inset: auto 1rem 1rem auto; z-index: 70; max-width: 26rem; background: var(--c-surface); color: var(--c-texte); border-radius: var(--rayon); box-shadow: 0 20px 60px rgb(0 0 0 / .25); padding: 1.25rem; border: 1px solid var(--bordure); }
.cookies p { font-size: var(--t-s); } .cookies .boutons { margin: 0; } .cookies .bouton { flex: 1; }
/* Refuser et accepter : même taille, même poids, au premier niveau ; « Choisir » en lien, sur sa propre ligne. */
.cookies { max-width: min(26rem, calc(100vw - 2rem)); }
.cookies__titre { font-weight: 600; font-size: var(--t-base, 1rem); margin-bottom: .35rem; }
.cookies__boutons { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.cookies__boutons .cookies__choisir { grid-column: 1 / -1; justify-self: center; min-height: 44px; }
.cookies__choix { display: grid; gap: .25rem; margin: .5rem 0 .75rem; }
.cookies__choix[hidden], .panier-nb[hidden] { display: none; } /* « display » ne doit jamais écraser « hidden » */
.cookies__choix small { display: block; color: var(--c-doux); font-size: var(--t-xs); }
@media (max-width: 480px) { .cookies { inset: auto .75rem calc(.75rem + env(safe-area-inset-bottom)) .75rem; max-width: none; } }
/* Lien vers l'espace de gestion : discret dans le pied, ou visible dans l'en-tête (au choix du client). */
.pied__gestion { color: inherit; }
.entete__gestion span { font-size: var(--t-s); }
@media (max-width: 600px) { .entete__gestion span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
/* Parcours sur plusieurs jours (cadeau, défi, programme) : où en est la personne, avant le formulaire du jour. */
.parcours-etat { display: grid; gap: .6rem; padding: 1rem 1.1rem; margin-bottom: 1.25rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: color-mix(in srgb, var(--c-primaire) 5%, var(--c-surface)); }
.parcours-etat p { margin: 0; }
.parcours-etat__jour { font-weight: 600; }
.parcours-etat__jours { display: flex; gap: .3rem; }
.parcours-etat__jours span { flex: 1; height: .5rem; border-radius: 999px; background: color-mix(in srgb, var(--c-primaire) 14%, transparent); }
.parcours-etat__jours span.fait { background: var(--c-primaire); }
.parcours-etat__jours span.courant { background: color-mix(in srgb, var(--c-primaire) 45%, transparent); }
.resultat-provisoire { font-size: var(--t-s); color: var(--c-doux); }
.chatbot-bouton { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 65; border-radius: 999px; box-shadow: 0 10px 30px rgb(0 0 0 / .25); }
.menu-dock .chatbot-bouton { bottom: 5.5rem; }
.chatbot-bouton--logo { display: inline-flex; align-items: center; gap: .55rem; padding-inline-start: .35rem; }
.chatbot-bouton--logo .chatbot__logo, .chatbot-bouton--logo .chatbot__logo img { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #fff; object-fit: contain; display: block; }
.chatbot__tete .chatbot__logo, .chatbot__tete .chatbot__logo img { width: 2rem; height: 2rem; border-radius: 50%; background: #fff; object-fit: contain; display: block; flex: none; }
.chatbot__tete strong { flex: 1; margin-inline-start: .6rem; }
.chatbot { position: fixed; right: 1rem; bottom: 5rem; z-index: 66; width: min(24rem, calc(100vw - 2rem)); max-height: min(34rem, 75dvh); display: flex; flex-direction: column; background: var(--c-surface); color: var(--c-texte); border-radius: calc(var(--rayon) * 1.4); box-shadow: 0 30px 80px rgb(0 0 0 / .3); border: 1px solid var(--bordure); overflow: hidden; }
.chatbot__tete { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; background: var(--c-primaire); color: var(--c-primaire-txt); } .chatbot__tete button { background: none; border: 0; color: inherit; font-size: 1.5rem; min-width: 44px; min-height: 44px; cursor: pointer; }
.chatbot__fil { flex: 1; overflow: auto; padding: 1rem; display: grid; gap: .6rem; align-content: start; }
.bulle { max-width: 88%; padding: .6rem .85rem; border-radius: 1rem; font-size: .95rem; line-height: 1.45; }
.bulle--bot { background: color-mix(in srgb, var(--c-texte) 7%, transparent); border-bottom-left-radius: .3rem; }
.bulle--moi { background: var(--c-primaire); color: var(--c-primaire-txt); justify-self: end; border-bottom-right-radius: .3rem; }
.bulle a.bouton { min-height: 36px; padding: .35rem .8rem; margin: .4rem .3rem 0 0; font-size: .9rem; }
.suggestions { display: flex; flex-wrap: wrap; gap: .35rem; } .suggestions button { border: 1px solid var(--bordure); background: var(--c-surface); border-radius: 999px; padding: .35rem .75rem; font: inherit; font-size: .85rem; cursor: pointer; color: inherit; min-height: 36px; }
.chatbot__saisie { display: flex; gap: .4rem; padding: .6rem; border-top: 1px solid var(--bordure); } .chatbot__saisie input { min-height: 44px; }

.message-page { padding: 2rem 0; font-size: var(--t-l); }

/* Animations douces, désactivées si l'utilisateur le demande */
@media (prefers-reduced-motion: no-preference) {
  .anime-apparition { animation: apparition .7s cubic-bezier(.2, .7, .2, 1) both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  @keyframes apparition { from { opacity: 0; transform: translateY(24px); } }
}

@media print {
  .entete, .pied, .chatbot-bouton, .cookies, .boutons, .ed-barre, video, model-viewer { display: none !important; }
  body { background: #fff; color: #000; } .bloc { padding-block: 1rem; } a { color: #000; }
}

/* ---------- Gestion visible sur le site : compteur, équipe à jour, organigramme, budget ---------- */
.compteur { text-align: center; max-width: 44rem; margin-inline: auto; }
.compteur__chiffres p { margin: .3rem 0; } .compteur__montant { font-size: clamp(2rem, 6vw, 3.4rem); font-family: var(--f-titres, inherit); color: var(--c-primaire); }
.compteur__barre { height: 14px; border-radius: 999px; background: color-mix(in srgb, var(--c-texte) 10%, transparent); overflow: hidden; margin: 1rem 0 .3rem; }
.compteur__barre span { display: block; height: 100%; border-radius: inherit; background: var(--c-primaire); transition: width 1s ease; }
.compteur__pourcent { font-weight: 700; } .compteur--chiffres .compteur__barre { display: none; }
.personne__initiales { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--c-primaire) 15%, transparent); color: var(--c-primaire); font-size: 2rem; font-weight: 700; max-width: 9rem; margin-inline: auto; }
.equipe__groupe { margin: 2rem 0 1rem; }
.organigramme { overflow-x: auto; padding-bottom: 1rem; }
.organigramme ul { display: flex; justify-content: center; gap: 1.5rem; list-style: none; margin: 0; padding: 1.5rem 0 0; position: relative; }
.organigramme > ul { padding-top: 0; }
.organigramme li { display: flex; flex-direction: column; align-items: center; position: relative; min-width: 9rem; text-align: center; }
.organigramme ul ul li::before { content: ""; position: absolute; top: -1.5rem; height: 1.5rem; border-left: 2px solid color-mix(in srgb, var(--c-texte) 20%, transparent); }
.organigramme .personne__photo, .organigramme .personne__initiales { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; font-size: 1.4rem; }
.organigramme h3 { font-size: 1rem; margin: .4rem 0 0; }
.budget { width: 100%; border-collapse: collapse; } .budget td, .budget th { padding: .5rem; border-bottom: 1px solid color-mix(in srgb, var(--c-texte) 12%, transparent); text-align: left; } .budget td:last-child { text-align: right; }
.budget__barres { list-style: none; padding: 0; display: grid; gap: .8rem; max-width: 44rem; } .budget__barres li { display: grid; gap: .3rem; }
.budget__barre { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--c-texte) 10%, transparent); overflow: hidden; } .budget__barre span { display: block; height: 100%; background: var(--c-primaire); }
.note-admin { padding: .8rem 1rem; border: 2px dashed var(--c-primaire); border-radius: 10px; font-size: .9rem; }

/* ---------- Pages d'erreur (404, 403, page expirée, problème technique) : dans le gabarit et la charte du client ---------- */
.page-erreur { min-height: max(26rem, 58vh); display: grid; align-content: center; }
.page-erreur__in { width: 100%; }
.page-erreur__in > * { max-width: 40rem; }
.page-erreur h1 { margin-bottom: .4em; }
.page-erreur__texte { font-size: var(--t-l); color: var(--c-doux); text-wrap: pretty; margin: 0; }
.page-erreur__recherche { margin: 2rem 0 0; }
.page-erreur__recherche input { flex: 1 1 auto; min-width: 0; }
.page-erreur__recherche .bouton { flex: none; }
.page-erreur__sous-titre { font-family: var(--police-texte); font-size: var(--t-m); font-weight: 600; letter-spacing: 0; margin: 2.25rem 0 .6rem; }
.page-erreur__liens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: .1rem 1.5rem; }
.page-erreur__liens li { min-height: 44px; display: flex; align-items: center; }
.page-erreur__liens--forts { grid-template-columns: 1fr; font-size: var(--t-l); }
.page-erreur__reference { margin: 1.5rem 0 0; color: var(--c-doux); }
.page-erreur__reference strong { color: var(--c-texte); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.page-erreur__actions { margin-top: 2rem; align-items: center; }
.page-erreur__plan { margin-top: 1rem; padding-top: .25rem; border-top: 1px solid var(--bordure); }
@media (max-width: 20rem) { .page-erreur__recherche { flex-direction: column; } .page-erreur__recherche .bouton { width: 100%; } }

/* ---------- Envoi en cours (formulaires) : le bouton garde son texte, une roue discrète s'ajoute ---------- */
.bouton[aria-busy="true"] { cursor: progress; opacity: .85; }
.bouton[aria-busy="true"]::after { content: ""; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ocsia-tourne .7s linear infinite; }
@keyframes ocsia-tourne { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .bouton[aria-busy="true"]::after { animation: none !important; border-style: dotted; } }

/* ---------- Commentaires du site (Messages et demandes) : aux couleurs du site ---------- */
.commentaires__liste, .commentaire__reponses { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.commentaires__liste { margin-bottom: 2.5rem; }
.commentaire { display: grid; gap: .35rem; scroll-margin-top: 5rem; }
.commentaire__tete { margin: 0; color: var(--c-doux); font-size: var(--t-s); }
.commentaire__tete strong { color: var(--c-texte); font-weight: 650; }
.commentaire__texte { overflow-wrap: anywhere; max-width: 65ch; }
.commentaire__reponses { margin-top: .5rem; padding-left: 1rem; border-left: 1px solid var(--bordure); }
.commentaire--equipe { padding: .8rem 1rem; border-radius: var(--rayon); background: color-mix(in srgb, var(--c-primaire) 7%, var(--c-surface)); }
.commentaires__nb, .commentaires__vide { color: var(--c-doux); }
.commentaires__vide { margin-bottom: 2rem; }
.commentaires__form h3 { margin-bottom: 0; }
:target.commentaire { animation: commentaire-ici 2s ease-out; }
@keyframes commentaire-ici { from { background: color-mix(in srgb, var(--c-secondaire) 30%, transparent); } }
@media (prefers-reduced-motion: reduce) { :target.commentaire { animation: none; } }

/* ---------- Produit à axes : choix axe par axe (chantier N, 13/10/2026) ----------
   Un groupe par axe, les valeurs en pastilles aux couleurs de la charte. Choix impossible : barré, en pointillés,
   non cliquable (et « indisponible » lu par les lecteurs d'écran). Le prix suit avec un fondu court (retour visuel). */
.choix-variantes { display: grid; gap: 1.1rem; margin: 0 0 1.25rem; }
.choix-variantes .choix-axe { display: block; border: 0; margin: 0; padding: 0; min-width: 0; }
.choix-variantes .choix-axe__titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; padding: 0; margin: 0 0 .55rem; font-weight: 600; }
.choix-axe__valeur { font-weight: 400; color: var(--c-doux); }
.choix-axe__options { display: flex; flex-wrap: wrap; gap: .5rem; }
.choix-option__radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.choix-option { display: inline-flex; align-items: center; min-height: 44px; padding: .45rem 1rem; border: 1.5px solid color-mix(in srgb, var(--c-texte) 22%, transparent); border-radius: var(--rayon); background: var(--c-surface); color: var(--c-texte); font-size: var(--t-m); line-height: 1.2; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--transition), background-color var(--transition), color var(--transition), transform 120ms ease-out; }
@media (hover: hover) and (pointer: fine) { .choix-option:hover { border-color: var(--c-primaire); } }
.choix-option:active { transform: scale(.97); }
.choix-option__radio:checked + .choix-option { border-color: var(--c-primaire); background: var(--c-primaire); color: var(--c-primaire-txt); }
.choix-option__radio:focus-visible + .choix-option { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.choix-option.est-indispo, .choix-option__radio:disabled + .choix-option { border-style: dashed; color: var(--c-doux); background: transparent; text-decoration: line-through; text-decoration-thickness: 1px; cursor: not-allowed; opacity: .7; }
.choix-option.est-indispo:active { transform: none; }
.choix-variantes__etat { margin: 0; min-height: 1.4em; font-size: var(--t-s); font-weight: 600; color: var(--c-primaire); }
.choix-variantes__etat:empty { min-height: 0; }
.prix-change { display: inline-block; animation: prix-change 180ms cubic-bezier(.23, 1, .32, 1); }
@keyframes prix-change { from { opacity: .35; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.produit-fiche__panier { display: grid; grid-template-columns: minmax(5rem, 7rem) 1fr; gap: .4rem .75rem; align-items: end; }
.produit-fiche__panier label { grid-column: 1 / -1; font-weight: 600; }
.produit-fiche__panier .bouton { width: 100%; }
.produit-fiche__panier .bouton:disabled { opacity: .55; cursor: not-allowed; }
.produit-fiche__message { margin: .6rem 0 0; font-size: var(--t-s); color: #8f1c13; }
.champ-produit .choix-variantes { grid-column: 1 / -1; margin: .25rem 0 0; }
.panier__choix { display: block; color: var(--c-doux); font-size: var(--t-s); }
.panier__alerte { display: block; color: #8f1c13; font-size: var(--t-s); font-weight: 600; }
/* Panier au téléphone : une ligne par article, le nom et le choix en entier, puis quantité, total et « Retirer ». */
@media (max-width: 600px) {
  .tableau.panier thead { display: none; }
  .tableau.panier, .tableau.panier tbody, .tableau.panier tfoot { display: block; }
  .tableau.panier tr { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--bordure); }
  .tableau.panier td, .tableau.panier th { display: block; padding: 0; border: 0; }
  .tableau.panier td:empty { display: none; }
  .tableau.panier tbody td:first-child { grid-column: 1 / -1; }
  .tableau.panier tbody td:nth-child(2) .en-ligne input { min-width: 0; max-width: 5rem; flex: none; }
  .tableau.panier tbody td:nth-child(3) { text-align: right; font-weight: 600; }
  .tableau.panier tfoot tr { grid-template-columns: 1fr auto; }
  .tableau.panier tfoot td { text-align: right; font-weight: 700; }
}
/* Produit sans photo ni objet 3D : pas de colonne vide, la fiche se lit sur une seule colonne. */
@media (min-width: 900px) { .produit-fiche:has(.produit-fiche__visuels:empty) { grid-template-columns: minmax(0, 44rem); } }

/* Code intégré : un cadre isolé, sans bordure, à la largeur du contenu (13/10/2026). */
.integration { margin: 1rem 0; }
.integration iframe { width: 100%; border: 0; display: block; background: transparent; }
.integration__vide { padding: 1.5rem; border: 1px dashed currentColor; border-radius: 12px; opacity: .7; text-align: center; }
.champ--code .integration { margin: .5rem 0 0; }
/* Bloc « Avis » : le bouton « Laisser un avis » ouvre le formulaire sur place (13/10/2026). */
.avis__laisser { margin-top: 1.25rem; }
.avis__laisser > summary { list-style: none; display: inline-flex; cursor: pointer; }
.avis__laisser > summary::-webkit-details-marker { display: none; }
.avis__laisser[open] > summary { margin-bottom: 1rem; }
.avis__formulaire { max-width: 40rem; }

/* =========================================================================
   Ajouts du 13/10/2026 (site ocsia2.com, utiles à tous les sites)
   ========================================================================= */

/* ---------- Menu « feuille » : sur téléphone, le menu monte du bas de l'écran (à portée de pouce) ---------- */
.nav__poignee { display: none; }
@media (max-width: 900px) {
  .menu-feuille .nav { inset: auto 0 0 0; max-height: 86dvh; padding: .5rem var(--marge) calc(1.5rem + env(safe-area-inset-bottom)); border: 0; border-radius: calc(var(--rayon) * 2.4) calc(var(--rayon) * 2.4) 0 0; background: var(--c-surface); box-shadow: 0 -20px 50px -20px rgb(0 0 0 / .35); transform: translateY(105%); transition: transform 320ms cubic-bezier(.32, .72, 0, 1), visibility 320ms; z-index: 70; }
  .menu-feuille .nav.ouvert { transform: none; }
  .menu-feuille .nav__poignee { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--bordure); margin: .35rem auto 1rem; }
  .menu-feuille .nav__liste { gap: .2rem; }
  .menu-feuille .nav__liste a { min-height: 52px; font-size: var(--t-l); }
  .menu-feuille .nav__liste a[aria-current="page"] { box-shadow: none; background: color-mix(in srgb, var(--c-primaire) 10%, transparent); }
  .menu-feuille .nav__liste a.bouton { justify-content: center; margin-top: .75rem; }
  /* Le flou de l'en-tête ferait de lui le cadre de la feuille (position: fixed) : sans flou, la feuille se cale sur l'écran. */
  .menu-feuille .entete { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .menu-feuille.menu-ouvert .entete { z-index: 70; }
  .menu-feuille.menu-ouvert::after { content: ""; position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / .4); animation: feuille-voile 320ms ease both; }
  @keyframes feuille-voile { from { opacity: 0; } }
}

/* ---------- Logo du mode sombre (réglage site.logo_sombre) ---------- */
.logo__clair, .logo__sombre { display: inline-flex; }
.logo__sombre { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .logo__sombre { display: inline-flex; } :root:not([data-theme="clair"]) .logo__clair { display: none; } }
:root[data-theme="sombre"] .logo__sombre { display: inline-flex; } :root[data-theme="sombre"] .logo__clair { display: none; }

/* ---------- Mouvement lié au défilement (option « Au défilement » d'une section) : statique sans support ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .anime-defilement > .bloc__in { animation: defilement linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
}
@keyframes defilement { from { opacity: .001; transform: translateY(2.5rem); } }

/* ---------- Questionnaires : sommaire des étapes, réponses gardées, « Je ne sais pas encore », outils, récapitulatif ---------- */
.formulaire__sommaire ol { list-style: none; margin: 0; padding: 0 0 .6rem; display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; position: relative; }
.formulaire__sommaire ol::-webkit-scrollbar { display: none; }
.formulaire__sommaire button { min-height: 44px; padding: .45rem .9rem; border: 1px solid var(--bordure); border-radius: 999px; background: transparent; color: var(--c-doux); font: inherit; white-space: nowrap; cursor: pointer; }
.formulaire__sommaire button[aria-current="step"] { color: var(--c-texte); font-weight: 600; border-color: var(--c-primaire); background: color-mix(in srgb, var(--c-primaire) 10%, transparent); }
.formulaire__garde { font-size: var(--t-s); color: var(--c-doux); display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; }
.formulaire__garde .lien { min-height: 44px; }
.formulaire__effacer[data-confirmer] { color: #b42318; font-weight: 600; }
.formulaire__annuler { font-weight: 700; color: var(--c-texte); }
.champ__nsp { justify-self: start; min-height: 44px; padding: .3rem .85rem; border: 1px dashed var(--bordure); border-radius: 999px; background: transparent; color: var(--c-doux); font: inherit; font-size: var(--t-s); cursor: pointer; }
.champ__nsp[aria-pressed="true"] { border-style: solid; border-color: var(--c-secondaire); color: var(--c-texte); background: color-mix(in srgb, var(--c-secondaire) 18%, transparent); }
.champ--nsp > :is(input, textarea, select, fieldset, label) { opacity: .5; }
.outils { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: .5rem; }
.outil { display: grid; gap: .3rem; padding: .35rem .6rem .6rem; border: 1px solid var(--bordure); border-radius: var(--rayon); }
.outil:has(input:checked) { border-color: var(--c-primaire); background: color-mix(in srgb, var(--c-primaire) 6%, transparent); }
.outil select { min-height: 40px; font-size: var(--t-s); }
.outil select:disabled { display: none; } /* le choix (garder, remplacer) n'apparaît que pour un outil coché */
.formulaire__recap { padding-top: .5rem; border-top: 1px solid var(--bordure); }
.formulaire__recap-titre { font-weight: 600; }
.formulaire__recap dl { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); margin: .5rem 0 0; }
.formulaire__recap dt, .formulaire__recap dd { margin: 0; padding-block: .55rem; border-top: 1px solid var(--bordure); }
.formulaire__recap dt { color: var(--c-doux); padding-right: 1rem; }
@media (max-width: 640px) { .formulaire__recap dl { grid-template-columns: minmax(0, 1fr); } .formulaire__recap dd { border-top: 0; padding-top: 0; } }

/* ---------- Bloc « Installer l'app » : l'appareil du visiteur d'abord ---------- */
.installer-app__vous { font-weight: 600; margin-bottom: 1rem; }
.installer-app__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.installer-app__appareil { padding: 1.25rem; border: 1px solid var(--bordure); border-radius: calc(var(--rayon) * 1.4); background: var(--c-surface); display: grid; gap: .5rem; align-content: start; }
.installer-app__appareil.est-vous { border-color: var(--c-primaire); box-shadow: 0 0 0 1px var(--c-primaire); }
.installer-app__nom { font-size: var(--t-l); margin: 0; }
.installer-app__appareil .bouton { justify-self: start; margin-top: .25rem; }
.installer-app--detecte .installer-app__liste:first-of-type { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
.installer-app__autres { margin-top: 1.25rem; }
.installer-app__autres summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: .5rem; list-style: none; }
.installer-app__autres summary::-webkit-details-marker { display: none; }
/* Le repère qui dit que la liste se déplie (le navigateur retire le sien en display: flex). */
.installer-app__autres summary::after { content: ""; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 200ms cubic-bezier(.23, 1, .32, 1); }
.installer-app__autres[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.installer-app__autres .installer-app__liste { margin-top: .75rem; }
.installer-app__note { margin-top: 1.25rem; color: var(--c-doux); }

/* Lien discret vers l'espace de gestion, en pied de page : cible tactile de 44 px (mesuré à 16 px le 13/10/2026). */
.pied__gestion { display: inline-flex; align-items: center; min-height: 44px; }
/* Mouvement des questionnaires (find-animation-opportunities, 13/10/2026) : l'étape suivante et le choix d'un outil coché
   ne surgissent pas d'un coup ; 200 ms au plus, ease-out ; sous « mouvement réduit », un fondu seulement. */
.champ__nsp { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
@media (prefers-reduced-motion: no-preference) {
  .formulaire--etapes .formulaire__etape:not([hidden]) { animation: etape-entree 200ms cubic-bezier(.23, 1, .32, 1); }
  .outil select:not(:disabled) { animation: etape-entree 160ms cubic-bezier(.23, 1, .32, 1); }
}
@media (prefers-reduced-motion: reduce) { .formulaire--etapes .formulaire__etape:not([hidden]) { animation: etape-fondu 150ms ease; } }
@keyframes etape-entree { from { opacity: 0; transform: translateY(6px); } }
@keyframes etape-fondu { from { opacity: 0; } }

/* Questionnaire rempli par son lien personnel : pour qui est la réponse (prénom et mail ne se redemandent pas). */
.formulaire__pour { margin: 0 0 1rem; font-size: .95rem; color: var(--c-gris, #5b5f66); }