/* ==========================================================================
   Otini — jetons de la charte de design
   Une seule source. Bricks référence ces variables, ne les redéfinit jamais.
   Toute valeur absente d'ici n'existe pas dans le design system.
   ========================================================================== */

:root {
  /* ---- Couleurs de marque (ne changent jamais) ---- */
  --otini-forest:       #1E3A16;  /* bouton principal, aplats, pied de page */
  --otini-forest-deep:  #16300F;
  --otini-green:        #7EA62A;  /* signe de marque, filets. JAMAIS de texte sur blanc : 2,85:1 */
  --otini-green-deep:   #2E7D34;  /* surtitres, liens, petits libellés : 4,9:1 sur papier, lisible à 12 px */
  --otini-amber:        #FCB53B;  /* uniquement l'action que le concurrent ne peut pas proposer */
  --otini-amber-ink:    #3A2B06;  /* texte sur ambre */
  --otini-amber-deep:   #B37A08;

  /* ---- Surfaces et texte ---- */
  --otini-paper:        #FBFCF8;
  --otini-ink:          #14200F;
  --otini-card:         #F2F5EC;
  --otini-border:       #E0E6D6;
  --otini-hair:         #EDF0E7;
  --otini-muted:        #65705C;
  --otini-green-soft:   #EDF3E1;
  --otini-amber-soft:   #FFF6E3;
  --otini-on-forest:    #FBFCF8;
  --otini-on-forest-muted: #A9BFA0;

  /* ---- Familles ---- */
  --otini-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --otini-sans:    'Poppins', system-ui, -apple-system, sans-serif;
  --otini-mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* ---- Échelle typographique : six valeurs, rien entre ---- */
  --otini-fs-label: 12px;
  --otini-fs-ui:    14px;
  --otini-fs-body:  16px;
  --otini-fs-h3:    21px;
  --otini-fs-h2:    32px;
  --otini-fs-h1:    46px;

  /* ---- Espace : échelle de 4 ---- */
  --otini-s1: 4px;  --otini-s2: 8px;  --otini-s3: 12px; --otini-s4: 16px;
  --otini-s5: 24px; --otini-s6: 32px; --otini-s7: 48px; --otini-s8: 64px; --otini-s9: 96px;

  /* ---- Rayons : une échelle de trois valeurs, plus la pilule ---- */
  --otini-radius-xs:   10px;   /* champs, badges, étiquettes, petites vignettes */
  --otini-radius-sm:   16px;   /* cartes, panneaux, notes, tableaux */
  --otini-radius-lg:   20px;   /* grands blocs, médias, bandeaux */
  --otini-radius-pill: 999px;  /* boutons */
  --otini-radius-flat: var(--otini-radius-xs); /* ancien nom, conservé le temps de la migration */

  /* ---- Ombres : deux niveaux, jamais plus ---- */
  --otini-ombre-1: 0 1px 2px rgba(20, 32, 15, .04);
  --otini-ombre-2: 0 1px 2px rgba(20, 32, 15, .04), 0 12px 32px -16px rgba(20, 32, 15, .14);

  /* ---- Largeurs ---- */
  --otini-w-content: 1200px;
  --otini-w-text:    680px;
}

/* --------------------------------------------------------------------------
   Base. Bricks pose sa propre pile système sur body ; la charte reprend la
   main ici pour que tout le texte courant soit en Poppins et en encre Otini.
   -------------------------------------------------------------------------- */
body {
  font-family: var(--otini-sans);
  font-size: var(--otini-fs-body);
  line-height: 1.6;
  color: var(--otini-ink);
  background: var(--otini-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--otini-display); color: inherit; }
::selection { background: var(--otini-amber-soft); color: var(--otini-ink); }
:focus-visible { outline: 2px solid var(--otini-green-deep); outline-offset: 3px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   Classes utilitaires à poser sur les éléments Bricks.
   Nommées en français pour que le client comprenne ce qu'il regarde.
   -------------------------------------------------------------------------- */

.otini-surtitre {
  font-family: var(--otini-mono);
  font-size: var(--otini-fs-label);
  line-height: 1.4;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--otini-green-deep);
}

/* Prix : toujours en mono, toujours tabulaire, pour s'aligner dans un comparatif. */
.otini-prix {
  font-family: var(--otini-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -.02em;
}
.otini-prix--grand { font-size: var(--otini-fs-h1); line-height: 1.05; }
.otini-prix--carte { font-size: var(--otini-fs-h3); }
.otini-prix sup {
  font-size: var(--otini-fs-label);
  letter-spacing: .06em;
  color: var(--otini-muted);
  vertical-align: baseline;
  margin-left: 5px;
}
/* Le calage haut n'a de sens que sur le grand prix, où le chiffre fait 46 px. */
.otini-prix--grand sup { vertical-align: 1.6em; margin-left: 6px; }

/* Boutons : pilule, 500, sans majuscules, sans interlettrage. Jamais plus de deux par écran. */
.otini-btn {
  display: inline-flex; align-items: center; gap: var(--otini-s2);
  font-family: var(--otini-sans); font-weight: 500;
  font-size: var(--otini-fs-ui); line-height: 1;
  padding: 14px 26px;
  border-radius: var(--otini-radius-pill);
  border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: opacity .15s ease;
}
.otini-btn:hover { opacity: .88; }
.otini-btn--principal { background: var(--otini-forest); color: var(--otini-on-forest); }
.otini-btn--accent    { background: var(--otini-amber);  color: var(--otini-amber-ink); }
.otini-btn--fantome   { background: transparent; color: var(--otini-ink); border-color: var(--otini-border); }
.otini-btn--clair     { background: transparent; color: var(--otini-on-forest); border-color: rgba(251,252,248,.4); }

/* Mention obligatoire sur une image : rendu de synthèse ou photo réelle. */
.otini-mention {
  position: absolute; bottom: var(--otini-s4); left: var(--otini-s4);
  font-family: var(--otini-mono); font-size: var(--otini-fs-label);
  letter-spacing: .06em; padding: 5px 12px;
  border-radius: var(--otini-radius-pill);
  background: rgba(20, 32, 15, .72); color: #FBFCF8;
  backdrop-filter: blur(4px);
}

/* Voile sur photo quand du texte est posé dessus. Jamais un noir pur. */
.otini-voile {
  background: linear-gradient(to right, rgba(20,32,15,.82), rgba(20,32,15,.34));
}

/* Caractéristique non validée par une fiche fournisseur. */
.otini-a-confirmer {
  display: inline-block; font-family: var(--otini-mono);
  font-size: var(--otini-fs-label); letter-spacing: .04em;
  padding: 1px 7px; border-radius: var(--otini-radius-pill);
  background: var(--otini-amber-soft); color: #8A5D06;
  border: 1px solid var(--otini-amber);
  vertical-align: 2px; margin-left: 6px;
}

/* Encadrés. Le vert informe, l'ambre avertit. */
/*
 * Encadrés — « étiquette ».
 * Une fiche papier, et l'étiquette à cheval sur le bord supérieur, comme un
 * dossier classé. La couleur vit dans l'onglet et jamais dans un fond teinté :
 * le liseré vertical, qui se battait avec l'arrondi, disparaît.
 */
.otini-note {
  position: relative;
  border: 1px solid var(--otini-border);
  border-radius: var(--otini-radius-sm);
  background: var(--otini-paper);
  box-shadow: var(--otini-ombre-1);
  padding: var(--otini-s6) var(--otini-s5) var(--otini-s5);
  font-size: var(--otini-fs-ui);
}
.otini-note--alerte { border-color: #EFE1BE; background: var(--otini-paper); }
.otini-note { max-width: 78ch; }

/* Tableaux : filet et aplat, pas d'ombre. */
.otini-tableau { width: 100%; border-collapse: collapse; font-size: var(--otini-fs-ui); }
.otini-tableau th {
  text-align: left; font-family: var(--otini-mono);
  font-size: var(--otini-fs-label); letter-spacing: .09em; text-transform: uppercase;
  font-weight: 500; color: var(--otini-muted);
  padding: var(--otini-s3) var(--otini-s4);
  border-bottom: 1px solid var(--otini-ink);
  background: var(--otini-card);
}
.otini-tableau td {
  padding: var(--otini-s3) var(--otini-s4);
  border-bottom: 1px solid var(--otini-hair);
  vertical-align: top;
}
.otini-tableau td.chiffre { font-family: var(--otini-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.otini-tableau tr.surligne td { background: var(--otini-green-soft); }
.otini-tableau tr.surligne td:first-child { position: relative; font-weight: 500; }
.otini-tableau tr.surligne td:first-child::before {
  content: ""; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 3px;
  background: var(--otini-forest); border-radius: var(--otini-radius-pill);
}
.otini-tableau tr.surligne td:first-child { padding-left: 28px; }
.otini-tableau th:first-child { padding-left: 28px; }
.otini-tableau td:first-child { padding-left: 28px; }

/* Un tableau large défile dans son propre conteneur, jamais la page. */
.otini-tableau-wrap {
  position: relative; overflow: hidden; overflow-x: auto;
  border: 1px solid var(--otini-border); border-radius: var(--otini-radius-sm);
  background: var(--otini-paper); box-shadow: var(--otini-ombre-1);
}

/* ==========================================================================
   Blocs rendus par les shortcodes du greffon.
   ========================================================================== */

.otini-surtitre--gris { color: var(--otini-muted); }
.otini-source {
  font-family: var(--otini-mono); font-size: var(--otini-fs-label);
  letter-spacing: .04em; color: var(--otini-muted); margin-top: var(--otini-s3);
}

/* [otini_prix] */
.otini-bloc-prix { border: 1px solid var(--otini-border); border-radius: var(--otini-radius-sm); padding: var(--otini-s5); background: var(--otini-paper); box-shadow: var(--otini-ombre-1); }
.otini-prix-mention {
  font-size: var(--otini-fs-ui); color: var(--otini-muted);
  margin: var(--otini-s2) 0 0; line-height: 1.5;
}

/* [otini_preuves] */
.otini-preuves {
  border-radius: var(--otini-radius-sm); overflow: hidden;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--otini-card);
  border-block: 1px solid var(--otini-border);
}
.otini-preuve { padding: var(--otini-s5); border-left: 1px solid var(--otini-border); }
.otini-preuve:first-child { border-left: 0; }

.otini-preuve-k {
  font-family: var(--otini-mono); font-size: var(--otini-fs-label);
  letter-spacing: .09em; text-transform: uppercase; color: var(--otini-muted);
}
.otini-preuve-v {
  font-family: var(--otini-display); font-size: var(--otini-fs-h3);
  font-weight: 600; letter-spacing: -.015em; margin-top: 2px;
}
.otini-preuve-n {
  font-size: var(--otini-fs-ui); color: var(--otini-muted);
  margin-top: 2px; line-height: 1.45;
}
@media (max-width: 760px) {
  .otini-preuves { grid-template-columns: 1fr 1fr; }
  .otini-preuve:nth-child(3) { border-left: 0; }
  .otini-preuve:nth-child(n+3) { border-top: 1px solid var(--otini-border); }
}

/* [otini_perimetre] */
.otini-perimetre {
  border-radius: var(--otini-radius-sm); overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--otini-border); border: 1px solid var(--otini-border);
}
.otini-perimetre > div { background: var(--otini-paper); padding: var(--otini-s5); }
@media (max-width: 700px) { .otini-perimetre { grid-template-columns: 1fr; } }
.otini-liste { list-style: none; margin: var(--otini-s3) 0 0; padding: 0; font-size: var(--otini-fs-ui); line-height: 1.9; }
.otini-liste li { padding-left: 22px; position: relative; }
.otini-liste li::before { position: absolute; left: 0; font-family: var(--otini-mono); font-size: 13px; }
.otini-liste--oui li::before { content: "\2713"; color: var(--otini-green-deep); }
.otini-liste--non li::before { content: "\2014"; color: var(--otini-muted); }

/* [otini_faq] */
/*
 * Questions — « étiquette ».
 * Une fiche par question plutôt qu'une liste dans une boîte. Le bloc garde la
 * mesure de lecture : le bouton tombe juste après la question et non à neuf
 * cents pixels de là, ce qui laissait la moitié de la largeur vide.
 */
/* La colonne de texte, pas la pleine largeur : sur une rangée de 1 150 px,
   une question de six mots laissait un couloir vide avant le signe « + ». */
.otini-faq {
  display: grid; gap: var(--otini-s3);
  max-width: var(--otini-w-text);
  border: 0; background: none; box-shadow: none;
}
.otini-faq details {
  background: var(--otini-paper); border: 1px solid var(--otini-border);
  border-radius: var(--otini-radius-sm); box-shadow: var(--otini-ombre-1);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.otini-faq details:hover { border-color: var(--otini-green-deep); }
.otini-faq details[open] { border-color: var(--otini-green-deep); box-shadow: var(--otini-ombre-2); }
.otini-faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; gap: var(--otini-s4);
  padding: var(--otini-s5);
}
/* Sur une question qui passe à la ligne, le numéro et le signe restent posés
   sur la première ligne plutôt que flottant au milieu du bloc. */
.otini-faq summary > * { margin-top: 1px; }
.otini-faq summary::-webkit-details-marker { display: none; }
.otini-faq summary:focus-visible { outline: 2px solid var(--otini-green-deep); outline-offset: 2px; border-radius: var(--otini-radius-sm); }
.otini-faq-n {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: var(--otini-radius-xs); background: var(--otini-card);
  color: var(--otini-green-deep);
  font-family: var(--otini-mono); font-size: 12px; letter-spacing: .04em;
  transition: background .15s ease, color .15s ease;
}
.otini-faq details[open] .otini-faq-n { background: var(--otini-forest); color: var(--otini-on-forest); }
.otini-faq-q {
  flex: 1; font-family: var(--otini-display); font-weight: 600;
  font-size: 17.5px; line-height: 1.35; letter-spacing: -.015em; color: var(--otini-ink);
  padding-block: 1px;
}
.otini-faq-s { flex: none; position: relative; width: 16px; height: 16px; margin-top: 6px; }
.otini-faq-s::before, .otini-faq-s::after {
  content: ""; position: absolute; background: var(--otini-green-deep);
  transition: transform .2s ease;
}
.otini-faq-s::before { left: 0; top: 7px; width: 16px; height: 1.5px; }
.otini-faq-s::after { left: 7px; top: 0; width: 1.5px; height: 16px; }
.otini-faq details[open] .otini-faq-s::after { transform: scaleY(0); }
.otini-faq-r {
  padding: 0 var(--otini-s5) var(--otini-s5) 72px; max-width: 74ch;
  margin-top: calc(var(--otini-s1) * -1);
  font-size: var(--otini-fs-body); color: var(--otini-muted);
}
.otini-faq-r strong { color: var(--otini-ink); font-weight: 500; }
.otini-faq-r p { margin: 0 0 var(--otini-s3); }
.otini-faq-r p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .otini-faq summary { padding: var(--otini-s3) var(--otini-s4); gap: var(--otini-s3); }
  .otini-faq-q { font-size: 16px; }
  .otini-faq-r { padding-left: var(--otini-s4); }
}

/* [otini_gamme] */
.otini-gamme { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--otini-s5); }
.otini-gamme > .otini-carte { grid-column: span 2; }
/* Cinq cartes : trois sur la première rangée, puis les deux grands formats,
   plus larges, sur la seconde. La grille se termine sans trou. */
.otini-gamme > .otini-carte:nth-last-child(2):nth-child(3n+1),
.otini-gamme > .otini-carte:nth-last-child(1):nth-child(3n+2) { grid-column: span 3; }
/* Les deux cartes larges gardent une photo de même hauteur que les autres. */
.otini-gamme > .otini-carte:nth-last-child(2):nth-child(3n+1) .otini-carte-im,
.otini-gamme > .otini-carte:nth-last-child(1):nth-child(3n+2) .otini-carte-im { aspect-ratio: 2/1; }
@media (max-width: 900px) {
  .otini-gamme > .otini-carte,
  .otini-gamme > .otini-carte:nth-last-child(2):nth-child(3n+1),
  .otini-gamme > .otini-carte:nth-last-child(1):nth-child(3n+2) { grid-column: span 3; }
  .otini-gamme .otini-carte-im { aspect-ratio: 4/3; }
}
@media (max-width: 560px) {
  .otini-gamme { grid-template-columns: 1fr; }
  .otini-gamme > .otini-carte,
  .otini-gamme > .otini-carte:nth-last-child(2):nth-child(3n+1),
  .otini-gamme > .otini-carte:nth-last-child(1):nth-child(3n+2) { grid-column: auto; }
}
.otini-carte {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--otini-paper);
  border: 1px solid var(--otini-border); border-radius: var(--otini-radius-sm);
  overflow: hidden; box-shadow: var(--otini-ombre-1);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.otini-carte:hover { box-shadow: var(--otini-ombre-2); border-color: var(--otini-green-deep); }
/* flex: none, sinon la photo s'étire pour égaliser la hauteur de la rangée
   et les onglets ne sont plus alignés d'une carte à l'autre. */
.otini-carte-im { position: relative; flex: none; aspect-ratio: 4/3; overflow: hidden; background: var(--otini-card); }
/* La photo est calée en absolu dans la boîte : sans cela, height:100% se
   résout en auto et une image plus haute que 4/3 étire la carte. */
.otini-carte-im img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .4s ease;
}
.otini-carte:hover .otini-carte-im img { transform: scale(1.03); }
/* Le nom est un onglet posé à cheval sur le bas de la photo : c'est l'image
   qu'on rogne, pas le conteneur, sinon l'onglet serait coupé. */
.otini-carte-im { overflow: visible; }
.otini-carte-im img { border-radius: 15px 15px 0 0; }
.otini-carte-nm {
  position: absolute; left: var(--otini-s4); bottom: 0; transform: translateY(50%);
  padding: 6px 13px; border-radius: var(--otini-radius-xs);
  background: var(--otini-forest); color: var(--otini-on-forest);
  font-family: var(--otini-display); font-weight: 600;
  font-size: var(--otini-fs-ui); letter-spacing: -.01em;
}
.otini-carte-corps {
  border-top: 1px solid var(--otini-border);
  padding: var(--otini-s5);
  flex: 1; display: flex; flex-direction: column; gap: var(--otini-s3);
}
.otini-carte-sp {
  font-family: var(--otini-mono); font-size: var(--otini-fs-label);
  letter-spacing: .06em; color: var(--otini-muted); text-transform: uppercase;
  display: flex; gap: var(--otini-s2); flex-wrap: wrap;
}
.otini-carte-sp span::after { content: " \00B7"; color: var(--otini-border); }
.otini-carte-sp span:last-child::after { content: ""; }
.otini-carte-reg {
  font-size: var(--otini-fs-ui); margin-top: auto; padding-top: var(--otini-s3);
  border-top: 1px solid var(--otini-hair);
  display: flex; justify-content: space-between; gap: var(--otini-s3); align-items: baseline;
}
.otini-carte-reg em { font-style: normal; color: var(--otini-muted); }
.otini-carte-go { color: var(--otini-green-deep); font-weight: 500; white-space: nowrap; }

/* [otini_medias] */
.otini-galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--otini-s2); }
.otini-galerie-i { position: relative; margin: 0; aspect-ratio: 4/3; overflow: hidden; background: var(--otini-card); border-radius: var(--otini-radius-sm); }
.otini-galerie-i img { width: 100%; height: 100%; object-fit: cover; }
.otini-galerie-grand { grid-column: 1 / -1; aspect-ratio: 16/9; }
@media (max-width: 560px) { .otini-galerie { grid-template-columns: 1fr 1fr; } }

/* [otini_urbanisme] et encadrés */
.otini-note-k {
  position: absolute; top: 0; left: var(--otini-s5); transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0; padding: 5px 12px; border-radius: var(--otini-radius-xs);
  background: var(--otini-forest); color: var(--otini-on-forest);
  font-family: var(--otini-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase; white-space: nowrap;
}
.otini-note-k::before {
  content: ""; flex: none; width: 5px; height: 5px;
  border-radius: var(--otini-radius-pill); background: var(--otini-green);
}
.otini-note--alerte .otini-note-k { background: var(--otini-amber); color: var(--otini-amber-ink); }
.otini-note--alerte .otini-note-k::before { background: var(--otini-amber-ink); opacity: .45; }
.otini-note { margin-block: var(--otini-s6) var(--otini-s5); }
/* Sur un aplat forêt, l'onglet s'inverse pour rester lisible. */
.otini-fond-forest .otini-note { background: rgba(251, 252, 248, .06); border-color: rgba(251, 252, 248, .18); box-shadow: none; }
.otini-fond-forest .otini-note-k { background: var(--otini-amber); color: var(--otini-amber-ink); }

/* [otini_coordonnees] */
.otini-coordonnees { font-family: var(--otini-mono); font-size: var(--otini-fs-ui); line-height: 2; }
.otini-coordonnees p { margin: 0; }

/* ---- Mise en page posée sur les éléments Bricks ---- */
.otini-wrap { width: 100%; max-width: var(--otini-w-content); margin-inline: auto; padding-inline: var(--otini-s5); }
.otini-section { padding-block: var(--otini-s9); }
@media (max-width: 760px) { .otini-section { padding-block: 56px; } }
.otini-section--serre { padding-block: var(--otini-s7); }
.otini-fond-carte { background: var(--otini-card); border-block: 1px solid var(--otini-border); }
.otini-fond-forest { background: var(--otini-forest); color: var(--otini-on-forest); }
.otini-fond-forest h1, .otini-fond-forest h2, .otini-fond-forest h3 { color: var(--otini-on-forest); }
.otini-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--otini-s7); align-items: start; }
@media (max-width: 860px) { .otini-split { grid-template-columns: 1fr; gap: var(--otini-s5); } }
.otini-pile { display: flex; flex-direction: column; gap: var(--otini-s4); }
.otini-pile--large { gap: var(--otini-s5); }
.otini-boutons { display: flex; gap: var(--otini-s3); flex-wrap: wrap; }
.otini-texte { max-width: var(--otini-w-text); }

/* En-tête */
.otini-entete { border-bottom: 1px solid var(--otini-hair); background: var(--otini-paper); }
.otini-entete-in { display: flex; align-items: center; gap: var(--otini-s5); padding-block: var(--otini-s4); }
.otini-marque { font-family: var(--otini-display); font-weight: 700; font-size: var(--otini-fs-h3); letter-spacing: -.02em; color: var(--otini-green); text-decoration: none; }
.otini-menu { list-style: none; display: flex; gap: var(--otini-s5); margin: 0; padding: 0; font-size: var(--otini-fs-ui); }
.otini-menu a { text-decoration: none; color: var(--otini-muted); }
.otini-menu a:hover { color: var(--otini-ink); }
@media (max-width: 960px) { .otini-menu { display: none; } }

/* Pied de page */
.otini-pied { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--otini-s7); }
footer.otini-fond-forest { background: var(--otini-forest-deep); border-top: 1px solid rgba(251,252,248,.10); }
@media (max-width: 860px) { .otini-pied { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .otini-pied { grid-template-columns: 1fr; } }
.otini-pied-nom { font-family: var(--otini-display); font-weight: 700; font-size: var(--otini-fs-h3); color: var(--otini-green); margin: 0; }
.otini-pied-txt { font-size: var(--otini-fs-ui); color: var(--otini-on-forest-muted); margin: var(--otini-s2) 0 var(--otini-s4); max-width: 34ch; }
.otini-pied h4 { font-family: var(--otini-mono); font-size: var(--otini-fs-label); letter-spacing: .09em; text-transform: uppercase; color: var(--otini-green); font-weight: 500; margin: 0 0 var(--otini-s3); }
.otini-pied ul { list-style: none; margin: 0; padding: 0; font-size: var(--otini-fs-ui); line-height: 2; }
.otini-pied a { color: var(--otini-on-forest-muted); text-decoration: none; }
.otini-pied a:hover { color: var(--otini-on-forest); }
.otini-pied .otini-coordonnees { color: var(--otini-on-forest-muted); font-size: var(--otini-fs-label); }
.otini-pied-bas { margin-top: var(--otini-s7); padding-top: var(--otini-s5); border-top: 1px solid rgba(251,252,248,.14); display: flex; gap: var(--otini-s5); flex-wrap: wrap; font-family: var(--otini-mono); font-size: var(--otini-fs-label); color: var(--otini-on-forest-muted); letter-spacing: .04em; }
.otini-pied-bas a { color: var(--otini-on-forest-muted); text-decoration: none; }

/* --------------------------------------------------------------------------
   Bricks pose display:flex / flex-direction:column sur ses conteneurs.
   Les classes de rangée doivent le dire explicitement, sinon tout s'empile.
   -------------------------------------------------------------------------- */
.otini-entete-in { flex-direction: row; flex-wrap: wrap; }
.otini-entete-in > *:last-child { margin-left: auto; }
.otini-boutons  { flex-direction: row; }
.otini-pile     { flex-direction: column; }
.otini-wrap     { display: block; }
.otini-split    { display: grid; }
.otini-preuves,
.otini-perimetre,
.otini-gamme,
.otini-galerie,
.otini-faq      { display: grid; }
.otini-tableau-wrap { display: block; }

/* La bande de preuve doit tenir aussi dans une colonne étroite. */
.otini-preuves { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.otini-preuve { border-left: 1px solid var(--otini-border); border-top: 0; }

/* Titres de la charte, posés en classe sur les éléments Bricks. */
.otini-d1 { font-family: var(--otini-display); font-size: var(--otini-fs-h1); line-height: 1.05; font-weight: 700; letter-spacing: -.035em; margin: 0; }
.otini-d2 { font-family: var(--otini-display); font-size: var(--otini-fs-h2); line-height: 1.12; font-weight: 600; letter-spacing: -.025em; margin: 0; }
@media (max-width: 760px) { .otini-d1 { font-size: var(--otini-fs-h2); } .otini-d2 { font-size: 26px; } }

.otini-espace { margin-top: var(--otini-s6); }
.otini-reponse {
  position: relative; border: 1px solid var(--otini-border);
  border-radius: var(--otini-radius-sm); background: var(--otini-paper);
  box-shadow: var(--otini-ombre-1); padding: var(--otini-s7) var(--otini-s5) var(--otini-s6);
}
.otini-reponse .otini-surtitre {
  position: absolute; top: 0; left: var(--otini-s5); transform: translateY(-50%);
  display: inline-flex; align-items: center; padding: 5px 12px;
  border-radius: var(--otini-radius-xs);
  background: var(--otini-amber); color: var(--otini-amber-ink);
  font-size: 12px; letter-spacing: .11em;
}

/* ---- Corrections de rendu relevées à la première mise en page ---- */

/* Bricks donne 100 % de largeur à ses éléments : dans une rangée, il faut
   rendre la largeur au contenu, sinon chaque élément prend une ligne. */
.otini-entete-in > * { width: auto; }
.otini-entete-in { align-items: center; gap: var(--otini-s5); }

/* La mention ne se pose que sur la grande image : sur une vignette de 150 px
   elle couvre le sujet. */
.otini-galerie-i:not(.otini-galerie-grand) .otini-mention {
  font-size: 9.5px; padding: 3px 8px; bottom: 6px; left: 6px; letter-spacing: .04em;
}

/* Bande de preuve : deux colonnes dès que le conteneur est étroit. */
.otini-preuves { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }

/* Le tableau technique se lit mieux en colonne unique bornée. */
.otini-technique .otini-tableau-wrap { max-width: none; }
/* Le bloc est centré sur la largeur utile : sinon le tableau tient la moitié
   gauche de l'écran et l'autre moitié reste vide. */
.otini-technique .otini-pile--large { max-width: 880px; margin-inline: auto; }
/* minmax(0,1fr) et non « auto » : une piste auto se dimensionne sur le
   max-content, donc un tableau large déborde au lieu de défiler. */
.otini-technique-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--otini-s6); margin-top: var(--otini-s6); }
/* Quand le modèle a un texte libre, il passe à côté du tableau. */
.otini-technique-duo:has(.brxe-post-content > *) {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--otini-s7); align-items: start;
}
/* Toute pile qui peut recevoir un tableau doit pouvoir rétrécir. */
.otini-pile > *, .otini-split > * { min-width: 0; }
@media (max-width: 860px) {
  .otini-technique-duo:has(.brxe-post-content > *) { grid-template-columns: 1fr; gap: var(--otini-s5); }
}

/* --------------------------------------------------------------------------
   Bricks applique flex-direction:column via une classe simple (.brxe-block).
   À spécificité égale, l'ordre de chargement décide, ce qui est fragile.
   Le sélecteur doublé monte la spécificité sans dépendre du nom de classe
   de Bricks, qui peut changer d'une version à l'autre.
   -------------------------------------------------------------------------- */
.otini-entete-in.otini-entete-in { flex-direction: row; align-items: center; flex-wrap: wrap; }
.otini-boutons.otini-boutons     { flex-direction: row; flex-wrap: wrap; }
.otini-entete-in.otini-entete-in > * { width: auto; }
.otini-entete-in.otini-entete-in > *:last-child { margin-left: auto; }

/* Deux colonnes dès que la bande de preuve est dans une colonne, quatre en pleine largeur. */
.otini-preuves.otini-preuves { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
/* Sur téléphone, deux colonnes serrées : quatre cartes empilées faisaient
   défiler un écran entier avant la première section. */
@media (max-width: 980px) { .otini-preuves.otini-preuves { grid-template-columns: 1fr 1fr; } .otini-preuve:nth-child(3) { border-left: 0; } .otini-preuve:nth-child(n+3) { border-top: 1px solid var(--otini-border); } }
@media (max-width: 760px) {
  .otini-preuves.otini-preuves { grid-template-columns: 1fr 1fr; gap: 1px; background: var(--otini-border); border-block: 0; }
  .otini-preuves.otini-preuves .otini-preuve { background: var(--otini-card); border: 0; padding: var(--otini-s4); }
}

/* Bricks donne width:100% à ses blocs : dans une rangée à trois éléments,
   il suffit d'un enfant à 100 % pour que tout se replie. On interdit le
   retour à la ligne et on laisse chaque enfant à sa largeur naturelle. */
/* .otini-wrap impose display:block, et l'en-tête porte les deux classes.
   Il faut donc rétablir le flex explicitement sur la rangée. */
.otini-entete-in.otini-entete-in { display: flex; flex-wrap: nowrap; }
.otini-entete-in.otini-entete-in > * { flex: 0 0 auto; width: auto; max-width: none; }
.otini-entete-in.otini-entete-in > .brxe-shortcode { flex: 1 1 auto; }
@media (max-width: 960px) {
  .otini-entete-in.otini-entete-in > .brxe-shortcode { display: none; }
}

/* ==========================================================================
   NIVEAU DISPLAY — extension assumée de l'échelle typographique
   --------------------------------------------------------------------------
   La charte fixe six tailles de texte, de 11,5 à 46 px, et interdit tout
   intermédiaire. Cette règle vaut pour le TEXTE. Un héros plein écran a
   besoin d'un cran au-dessus : à 46 px, un titre sur une photo de 1 400 px
   de large ne tient pas la page.
   On ajoute donc un seul niveau, fluide, réservé aux héros et aux chiffres
   de section. Rien entre 46 px et lui.
   ========================================================================== */
:root {
  --otini-fs-display: clamp(40px, 6.4vw, 88px);
  --otini-fs-display-s: clamp(30px, 4.4vw, 56px);
  --otini-fs-chiffre: clamp(44px, 7vw, 104px);
}

.otini-display {
  font-family: var(--otini-display);
  font-size: var(--otini-fs-display);
  line-height: .98;
  font-weight: 700;
  letter-spacing: -.04em;
  margin: 0;
  text-wrap: balance;
}
.otini-display--s { font-size: var(--otini-fs-display-s); line-height: 1.04; letter-spacing: -.03em; }

/* ---- Héros ---- */
.otini-hero { position: relative; background: #0d1409; overflow: clip; }
.otini-hero-media { position: absolute; inset: 0; }
.otini-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 74% 58%; }
/* L'éditeur visuel enveloppe parfois la photographie dans un conteneur ; sans
   cette règle l'image se calerait sur la hauteur de l'enveloppe et non sur
   celle du héros, et la bande de photo se réduirait à quelques pixels. */
.otini-hero-media > * { display: block; width: 100%; height: 100%; }
/* Le voile assombrit la colonne de texte et laisse la maison respirer à droite.
   Il est calé pour la vue au crépuscule, dont le ciel et la toiture sont clairs. */
.otini-hero-voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(16,26,12,.90) 0%, rgba(16,26,12,.72) 36%, rgba(16,26,12,.28) 62%, rgba(16,26,12,.08) 100%),
    linear-gradient(to top, rgba(13,20,9,.82) 0%, rgba(13,20,9,0) 48%);
}
.otini-hero-in {
  position: relative;
  max-width: var(--otini-w-content);
  margin-inline: auto;
  padding: clamp(72px, 11vw, 148px) var(--otini-s5) clamp(56px, 8vw, 104px);
  min-height: clamp(520px, 74vh, 760px);
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--otini-on-forest);
}
.otini-hero-in > * + * { margin-top: var(--otini-s5); }
.otini-hero h1 { color: #FBFCF8; max-width: 21ch; text-shadow: 0 1px 2px rgba(0,0,0,.28); }
.otini-hero .otini-hero-sous { text-shadow: 0 1px 1px rgba(0,0,0,.35); }
/* Au-delà de 1000 px la colonne de texte ne bouge plus : le titre est calibré
   pour tenir sur une seule ligne et occuper toute la largeur. En dessous, il
   revient à la mesure de 21 caractères et passe naturellement à la ligne
   après « pliables ». */
@media (min-width: 1000px) {
  .otini-hero h1 { max-width: none; font-size: clamp(52px, 5.6vw, 78px); }
}
/* Le nom de la marque reprend le vert de l'enseigne. Il n'est posé que sur
   la photographie sombre du héros, jamais sur un fond clair. */
.otini-h1-marque { color: var(--otini-green); }
.otini-hero .otini-hero-sous { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: #DDE7D4; max-width: 46ch; margin-top: var(--otini-s4); }
.otini-hero .otini-surtitre { color: var(--otini-amber); }

/* Filet ambre : le seul trait de couleur vive de la page. */
.otini-filet { width: 56px; height: 3px; background: var(--otini-amber); border: 0; margin: 0; }
/* Le filet remet à zéro ses marges ; dans le héros il se retrouverait collé
   sous le titre et se lirait comme un soulignement. */
.otini-hero .otini-filet { margin-top: var(--otini-s6); }

/* Prix d'appel posé sur le héros. */
.otini-hero-prix {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-family: var(--otini-mono); font-variant-numeric: tabular-nums;
  color: var(--otini-amber); font-size: clamp(15px, 1.5vw, 18px);
  letter-spacing: .02em;
}
.otini-hero-prix b { font-size: clamp(22px, 2.6vw, 34px); font-weight: 500; letter-spacing: -.02em; }
.otini-hero-prix span { color: #C3D3B8; font-size: var(--otini-fs-ui); font-family: var(--otini-sans); }

/* Bandeau de repères sous le héros, chiffres en mono. */
.otini-reperes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  border-top: 1px solid rgba(251,252,248,.16);
  margin-top: clamp(32px, 5vw, 56px); padding-top: var(--otini-s5);
}
.otini-repere { padding-right: var(--otini-s5); }
.otini-repere b {
  display: block; font-family: var(--otini-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(20px, 2.2vw, 28px); font-weight: 500; color: #FBFCF8; letter-spacing: -.02em;
}
.otini-repere span { font-size: var(--otini-fs-ui); color: #A9BFA0; line-height: 1.45; }
/* Entre 760 et 980 px, quatre repères tombaient en trois plus un : deux par deux dès 980. */
@media (max-width: 980px) { .otini-reperes { grid-template-columns: 1fr 1fr; row-gap: var(--otini-s5); } }
@media (max-width: 760px) {
  .otini-reperes { grid-template-columns: 1fr 1fr; row-gap: var(--otini-s5); }
  .otini-repere { padding-right: var(--otini-s3); }
  .otini-repere span { font-size: 13px; }
}

/* ---- Étapes du dépliage ---- */
.otini-etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--otini-border); border: 1px solid var(--otini-border); border-radius: var(--otini-radius-sm); overflow: hidden; box-shadow: var(--otini-ombre-1); }
@media (max-width: 760px) { .otini-etapes { grid-template-columns: 1fr; } }
.otini-etape { background: var(--otini-paper); padding: var(--otini-s6) var(--otini-s5); }
.otini-etape-n {
  font-family: var(--otini-mono); font-size: var(--otini-fs-label);
  letter-spacing: .14em; color: var(--otini-green-deep); display: block; margin-bottom: var(--otini-s4);
}
.otini-etape h3 { font-family: var(--otini-display); font-size: var(--otini-fs-h3); font-weight: 600; letter-spacing: -.015em; margin: 0 0 var(--otini-s2); }
.otini-etape p { font-size: var(--otini-fs-ui); color: var(--otini-muted); margin: 0; line-height: 1.6; }

/* ---- Usages ---- */
/* Empêche la césure d'un mot composé en fin de ligne dans les grands titres. */
.otini-insecable { white-space: nowrap; }

/* ATOUTS — les trois cartes du haut de l'accueil. Elles n'empruntent pas la
   grille à filet d'un pixel des étapes et des usages : elles sont détachées les
   unes des autres sur le fond teinté, pour se lire comme trois promesses et non
   comme un tableau. */
.otini-atouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--otini-s4); align-items: stretch; }
@media (max-width: 980px) { .otini-atouts { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.otini-atout {
  background: var(--otini-paper);
  border: 1px solid var(--otini-border);
  border-radius: var(--otini-radius-sm);
  box-shadow: var(--otini-ombre-1);
  padding: var(--otini-s6) var(--otini-s5) var(--otini-s5);
  display: flex; flex-direction: column; gap: var(--otini-s3);
}
.otini-atout-p {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none;
  border-radius: var(--otini-radius-xs);
  background: var(--otini-green-soft);
  color: var(--otini-forest);
  margin-bottom: var(--otini-s1);
}
.otini-atout-i { width: 24px; height: 24px; display: block; }
.otini-atout h3 {
  font-family: var(--otini-display); font-size: var(--otini-fs-h3); font-weight: 600;
  letter-spacing: -.015em; line-height: 1.25; margin: 0; text-wrap: balance;
}
.otini-atout p { font-size: var(--otini-fs-ui); line-height: 1.65; color: var(--otini-muted); margin: 0; }
.otini-atout-f {
  margin-top: auto; padding-top: var(--otini-s3);
  border-top: 1px solid var(--otini-hair);
  font-family: var(--otini-mono); font-size: var(--otini-fs-label);
  letter-spacing: .04em; color: var(--otini-green-deep);
}

.otini-usages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--otini-border); border: 1px solid var(--otini-border); border-radius: var(--otini-radius-sm); overflow: hidden; box-shadow: var(--otini-ombre-1); }
@media (max-width: 900px) { .otini-usages { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .otini-usages { grid-template-columns: 1fr; } }
.otini-usage { background: var(--otini-paper); padding: var(--otini-s5); display: flex; flex-direction: column; gap: var(--otini-s2); }
.otini-usage h3 { font-family: var(--otini-display); font-size: var(--otini-fs-h3); font-weight: 600; letter-spacing: -.015em; margin: 0; }
.otini-usage p { font-size: var(--otini-fs-ui); color: var(--otini-muted); margin: 0; }
.otini-usage-f { margin-top: auto; padding-top: var(--otini-s3); border-top: 1px solid var(--otini-hair); font-family: var(--otini-mono); font-size: var(--otini-fs-label); letter-spacing: .04em; }
/* Le titre d'une carte d'usage mène à la taxonomie. Le lien prend la couleur
   du titre : sans cette règle il s'afficherait en bleu souligné. */
.otini-usage h3 a { color: inherit; text-decoration: none; }
.otini-usage h3 a:hover { color: var(--otini-green-deep); }

/* ---- Showroom : photo pleine hauteur contre aplat forêt ---- */
.otini-showroom { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
@media (max-width: 860px) { .otini-showroom { grid-template-columns: 1fr; } }
.otini-showroom-ph { position: relative; min-height: 420px; border-radius: var(--otini-radius-lg); overflow: hidden; }
.otini-showroom-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.otini-showroom-tx { background: var(--otini-forest); color: var(--otini-on-forest); display: flex; align-items: center; }
.otini-showroom-tx > div { padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 64px); max-width: 620px; }
.otini-showroom-tx h2 { color: var(--otini-on-forest); }
.otini-showroom-tx p { color: var(--otini-on-forest-muted); }

/* Mention posée sur un héros plein cadre : en haut à droite, hors du texte. */
.otini-mention--hero { bottom: auto; left: auto; top: var(--otini-s5); right: var(--otini-s5); }

/* Bloc vidéo */
.otini-video { position: relative; background: #0d1409; overflow: clip; border-radius: var(--otini-radius-lg); }
.otini-video img { width: 100%; aspect-ratio: 16/10; object-fit: cover; opacity: .86; transition: opacity .3s ease, transform .6s ease; }
.otini-video:hover img { opacity: .94; transform: scale(1.02); }
.otini-play { position: absolute; inset: 0; display: grid; place-items: center; }
.otini-play > span {
  width: clamp(58px, 6vw, 82px); aspect-ratio: 1; border-radius: var(--otini-radius-pill);
  background: var(--otini-amber); color: var(--otini-amber-ink);
  display: grid; place-items: center; font-size: clamp(18px, 2vw, 24px);
  padding-left: 5px; transition: transform .25s ease;
}
.otini-video:hover .otini-play > span { transform: scale(1.06); }

/* ==========================================================================
   MASTHEAD D'UNE PAGE
   L'ancien en-tête laissait le titre seul sur du blanc, avec les deux tiers
   de la largeur vides. Il devient un bandeau sur aplat clair, fermé par un
   filet, avec des repères chiffrés à droite quand la page en a.
   ========================================================================== */
.otini-masthead {
  padding-block: clamp(36px, 5vw, 64px);
}
/*
 * Le titre part du bord gauche du cadre, comme tout le reste de la page, et
 * les repères occupent la marge de droite. Une seule verticale sur la page.
 */
.otini-masthead {
  display: grid;
  grid-template-columns:
    [pleine-start texte-start] min(var(--otini-w-text), 100%)
    [texte-end] minmax(0, 1fr)
    [pleine-end];
  align-items: start;
}
.otini-masthead-tx { grid-column: texte; min-width: 0; }
.otini-masthead-rep { grid-column: texte-end / pleine-end; min-width: 0; padding-left: var(--otini-s7); }

/* Sur une archive, le corps de page part du bord du cadre : l'en-tête suit. */
.otini-masthead--pleine { grid-template-columns: minmax(0, 1fr) minmax(0, 290px); }
.otini-masthead--pleine .otini-masthead-tx,
.otini-masthead--pleine .otini-masthead-rep { grid-column: auto; }
.otini-masthead-tx > * + * { margin-top: 0; }
.otini-masthead-tx h1 { margin: 0; max-width: 18ch; }
.otini-masthead-tx .otini-page-chapo { max-width: 52ch; }

/* Les repères : une colonne de chiffres, chacun sur son filet. */
.otini-masthead-rep { margin: 0; display: grid; gap: 0; }
.otini-masthead-rep > div {
  display: grid; gap: 2px;
  padding-block: var(--otini-s3);
  border-top: 1px solid var(--otini-border);
}
.otini-masthead-rep > div:last-child { border-bottom: 1px solid var(--otini-border); }
.otini-masthead-rep dt {
  font-family: var(--otini-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(19px, 1.9vw, 24px); font-weight: 500;
  letter-spacing: -.02em; color: var(--otini-ink);
}
.otini-masthead-rep dd {
  margin: 0; font-size: var(--otini-fs-label); color: var(--otini-muted);
  line-height: 1.5;
}

/* Le bandeau : aplat clair, fermé par un filet, sur toute la largeur. */
.otini-section--tete {
  background: var(--otini-card);
  border-bottom: 1px solid var(--otini-border);
  padding-block: 0;
}
.otini-section--contenu { padding-block: clamp(40px, 5vw, 72px) var(--otini-s9); }

@media (max-width: 1100px) {
  .otini-masthead, .otini-masthead--pleine { grid-template-columns: 1fr; gap: var(--otini-s6); align-items: start; }
  .otini-masthead-tx, .otini-masthead-rep { grid-column: 1; padding-left: 0; }
  .otini-masthead-rep { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 var(--otini-s5); }
  .otini-masthead-rep > div:last-child { border-bottom: 0; }
  .otini-masthead-tx h1 { max-width: none; }
}

/* ==========================================================================
   VENIR AU SHOWROOM
   Trois cartes : l'adresse, les horaires, le téléphone. Les deux qui mènent
   quelque part sont des liens entiers, pas un mot souligné au milieu d'un
   paragraphe.
   ========================================================================== */
.otini-venir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--otini-s4); }
.otini-venir-c {
  /* Colonne flex : l'action se colle en bas, les trois liens s'alignent
     même quand les cartes n'ont pas le même nombre de lignes. */
  display: flex; flex-direction: column; gap: 2px;
  background: var(--otini-paper); border: 1px solid var(--otini-border);
  border-radius: var(--otini-radius-sm); box-shadow: var(--otini-ombre-1);
  padding: var(--otini-s5); color: inherit; text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .2s ease;
}
a.otini-venir-c:hover { border-color: var(--otini-green-deep); box-shadow: var(--otini-ombre-2); transform: translateY(-2px); }
.otini-venir-c .otini-surtitre { margin-bottom: var(--otini-s3); }
.otini-venir-v {
  font-family: var(--otini-display); font-weight: 600; font-size: var(--otini-fs-h3);
  letter-spacing: -.02em; color: var(--otini-ink); line-height: 1.25;
}
.otini-venir-v--tel { font-family: var(--otini-mono); font-size: 22px; letter-spacing: -.01em; }
.otini-venir-n { font-size: var(--otini-fs-ui); color: var(--otini-muted); line-height: 1.6; }
.otini-venir-n--fort { font-family: var(--otini-mono); color: var(--otini-ink); margin-top: var(--otini-s1); }
.otini-venir-a {
  margin-top: auto; padding-top: var(--otini-s4);
  border-top: 1px solid var(--otini-hair);
  display: flex; align-items: center; gap: 7px;
  font-family: var(--otini-mono); font-size: var(--otini-fs-label);
  letter-spacing: .09em; text-transform: uppercase; color: var(--otini-green-deep);
}
.otini-venir-a::after { content: "\2192"; margin-left: auto; transition: transform .2s ease; }
a.otini-venir-c:hover .otini-venir-a::after { transform: translateX(4px); }
.otini-venir-a--muet { color: var(--otini-muted); }
.otini-venir-a--muet::after { content: ""; }
@media (max-width: 860px) { .otini-venir { grid-template-columns: 1fr; } }

/* ==========================================================================
   HÉROS PHOTO D'UNE PAGE
   Déclenché par l'image mise en avant de la page. Le voile part du bas et de
   la gauche, là où le texte se pose, et laisse la photo lisible ailleurs.
   ========================================================================== */
.otini-page-hero {
  position: relative; background: #0d1409; overflow: clip;
  display: grid; align-items: end;
  min-height: clamp(420px, 56vh, 620px);
}
.otini-page-hero-im {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 58%;
}
.otini-page-hero-voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(13, 20, 9, .96) 0%, rgba(13, 20, 9, .86) 34%, rgba(13, 20, 9, .34) 68%, rgba(13, 20, 9, .06) 100%),
    linear-gradient(to top, rgba(13, 20, 9, .55) 0%, rgba(13, 20, 9, 0) 55%);
}
.otini-page-hero-in {
  position: relative;
  padding-block: clamp(40px, 6vw, 72px);
  color: var(--otini-on-forest);
}
.otini-page-hero-in .otini-page-type { color: var(--otini-amber); }
.otini-page-hero-in h1 { color: var(--otini-on-forest); max-width: 16ch; }
.otini-page-hero-in .otini-page-chapo {
  color: #DDE7D4; max-width: 44ch; margin-top: var(--otini-s4);
}
.otini-page-hero-act { margin-top: clamp(24px, 3vw, 36px); }
.otini-page-tete-act { margin-top: var(--otini-s5); }
@media (max-width: 760px) {
  .otini-page-hero { min-height: clamp(360px, 62vh, 520px); }
  .otini-page-hero-im { object-position: 52% 52%; }
  .otini-page-hero-voile {
    background: linear-gradient(to top, rgba(13, 20, 9, .92) 6%, rgba(13, 20, 9, .5) 58%, rgba(13, 20, 9, .25) 100%);
  }
  .otini-page-hero-act { display: grid; gap: var(--otini-s3); }
  .otini-page-hero-act .otini-btn { justify-content: center; }
}
/* La page qui ouvre sur un héros n'a plus besoin du blanc au-dessus, et le
   conteneur de section cesse de brider la photo : pas de 100vw, donc pas de
   débordement causé par la barre de défilement. */
.otini-section--tete:has(.otini-page-hero) { padding: 0; }
.otini-section--tete:has(.otini-page-hero) > .otini-wrap { max-width: none; padding-inline: 0; }

/* ==========================================================================
   LIENS D'ACTION
   Un numéro ou une adresse doivent se voir cliquables : soulignement doux,
   et une icône devant qui dit de quoi il s'agit.
   ========================================================================== */
.otini-lien-action {
  display: inline-flex; align-items: center; gap: 9px;
  color: inherit; text-decoration: none;
}
.otini-lien-action > span {
  text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: text-decoration-color .15s ease;
}
.otini-lien-action:hover > span { text-decoration-color: currentColor; }
.otini-lien-action::before {
  content: ""; flex: none; width: 15px; height: 15px;
  background: currentColor; opacity: .55;
  transition: opacity .15s ease;
  -webkit-mask: var(--pic) center / contain no-repeat;
          mask: var(--pic) center / contain no-repeat;
}
.otini-lien-action:hover::before { opacity: 1; }
.otini-lien-tel {
  --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.1 9.9a16 16 0 0 0 6 6l1.26-1.26a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.otini-lien-carte {
  --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
/* Le grand numéro du bloc contact garde sa taille et son alignement. */
.otini-contact-v .otini-lien-action { gap: var(--otini-s3); }
.otini-contact-v .otini-lien-action::before { width: 22px; height: 22px; }
.otini-coordonnees .otini-lien-action { align-items: flex-start; }
.otini-coordonnees .otini-lien-action::before { margin-top: 5px; }
@media (max-width: 760px) {
  .otini-coordonnees a, .otini-contact-v a { min-height: 44px; }
}

/* ==========================================================================
   CIBLES TACTILES
   Sur téléphone, un lien de 16 px de haut se rate une fois sur trois.
   Les listes de liens passent à 44 px de hauteur utile sans que l'espacement
   visuel change beaucoup : c'est la zone cliquable qui grandit.
   ========================================================================== */
@media (max-width: 760px) {
  .otini-pied a,
  .otini-pied-bas a,
  .otini-fil-ariane a,
  .otini-fil-ariane [aria-current="page"] span,
  .otini-usage h3 a,
  .otini-menu a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .otini-marque { display: inline-flex; align-items: center; min-height: 44px; }
  .otini-pied-col { gap: 0; }
  .otini-fil-ariane ol { gap: var(--otini-s3); }
  .otini-fil-bar .otini-fil-ariane a,
  .otini-fil-bar .otini-fil-ariane [aria-current="page"] span { min-height: 40px; }
  .otini-pied-bas { gap: var(--otini-s4) var(--otini-s5); }
}

/* ==========================================================================
   MOUVEMENT
   Une seule idée : les blocs montent de 14 px en apparaissant. Rien d'autre.
   Départ visible, pas d'opacité 0 en attente : la page doit être lisible
   même si le script ne s'exécute pas.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .otini-anim { animation: otini-monte .7s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes otini-monte {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ==========================================================================
   RESPONSIVE
   Le corps ne défile jamais horizontalement. Seuls les tableaux défilent,
   chacun dans son conteneur.
   ========================================================================== */
html, body { overflow-x: clip; }
img, video { max-width: 100%; height: auto; }

@media (max-width: 1024px) {
  .otini-split { grid-template-columns: 1fr; gap: var(--otini-s6); }
  .otini-gamme { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
}
@media (max-width: 760px) {
  :root { --otini-s9: 56px; --otini-s8: 44px; --otini-s7: 32px; }
  .otini-wrap { padding-inline: 20px; }
  .otini-hero-in { min-height: 0; padding-top: clamp(56px, 16vw, 96px); }
  .otini-hero h1 { max-width: 100%; }
  .otini-galerie { grid-template-columns: 1fr 1fr; }
  .otini-galerie-grand { aspect-ratio: 4/3; }
  .otini-faq summary { font-size: 18px; padding-block: var(--otini-s4); }
  .otini-showroom-ph { min-height: 300px; }
  .otini-reperes { gap: var(--otini-s4); }
}
@media (max-width: 420px) {
  .otini-wrap { padding-inline: 16px; }
  .otini-gamme { grid-template-columns: 1fr; }
  .otini-boutons.otini-boutons > * { width: 100%; justify-content: center; }
}
.otini-surtitre-amber.otini-surtitre { color: var(--otini-amber); }

/* ==========================================================================
   NAVIGATION
   Panneau dépliant natif sous 960 px. Aucun JavaScript : <details> suffit,
   et le menu reste utilisable si un script échoue ailleurs dans la page.
   ========================================================================== */
.otini-nav { display: contents; }
.otini-nav-petit { display: none; }

/* Le bloc de droite de l'en-tête : téléphone puis bouton, sur une ligne. */
.otini-entete-droite.otini-entete-droite { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--otini-s4); width: auto; }
.otini-entete-droite.otini-entete-droite > * { width: auto; flex: 0 0 auto; }

/* Le numéro dans la barre : combiné, numéro en mono, horaires en dessous. */
.otini-entete-tel {
  display: inline-grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center;
  text-decoration: none; color: var(--otini-ink); white-space: nowrap;
}
.otini-entete-tel > svg { grid-row: span 2; color: var(--otini-green-deep); }
.otini-entete-tel-n { font-family: var(--otini-mono); font-size: 15px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
.otini-entete-tel-h { font-size: 11px; color: var(--otini-muted); line-height: 1.2; }
.otini-entete-tel:hover .otini-entete-tel-n { color: var(--otini-green-deep); }
@media (max-width: 1100px) { .otini-entete-tel-h { display: none; } .otini-entete-tel > svg { grid-row: auto; } }
@media (max-width: 960px) { .otini-entete-tel { display: none; } }

/* Le combiné rond n'existe que sur petit écran, à gauche du bouton de menu :
   appeler doit rester possible en un geste, même le panneau fermé. */
.otini-nav-tel { display: none; }
@media (max-width: 960px) {
  .otini-nav-tel {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--otini-forest); color: var(--otini-on-forest);
    margin-left: auto; margin-right: 10px; flex: none;
  }
  .otini-nav-tel + .otini-nav-petit { margin-left: 0; }
}

.otini-nav-petit > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--otini-mono); font-size: var(--otini-fs-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--otini-ink);
  padding: 11px 16px; border: 1px solid var(--otini-border);
  border-radius: var(--otini-radius-pill); user-select: none;
}
.otini-nav-petit > summary::-webkit-details-marker { display: none; }
.otini-nav-petit > summary > span {
  display: block; width: 15px; height: 1.5px; background: var(--otini-ink);
  margin-right: -13px; transition: transform .22s ease, opacity .22s ease;
}
.otini-nav-petit > summary > span:nth-of-type(1) { transform: translateY(-4.5px); }
.otini-nav-petit > summary > span:nth-of-type(3) { transform: translateY(4.5px); margin-right: 5px; }
.otini-nav-petit[open] > summary > span:nth-of-type(1) { transform: rotate(45deg); }
.otini-nav-petit[open] > summary > span:nth-of-type(2) { opacity: 0; }
.otini-nav-petit[open] > summary > span:nth-of-type(3) { transform: rotate(-45deg) translate(3px, -3px); }

.otini-nav-panneau {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
  background: var(--otini-paper);
  border-top: 1px solid var(--otini-border);
  border-bottom: 1px solid var(--otini-border);
  padding: var(--otini-s5) 20px var(--otini-s6);
  display: flex; flex-direction: column; gap: var(--otini-s5);
  box-shadow: 0 18px 32px -24px rgba(20, 32, 15, .45);
}
.otini-nav-panneau .otini-menu {
  flex-direction: column; gap: 0; font-size: var(--otini-fs-h3);
  font-family: var(--otini-display); font-weight: 600; letter-spacing: -.015em;
}
.otini-nav-panneau .otini-menu li { border-bottom: 1px solid var(--otini-hair); }
.otini-nav-panneau .otini-menu a { display: block; padding: 14px 0; color: var(--otini-ink); }
.otini-nav-panneau .otini-coordonnees { color: var(--otini-muted); font-size: var(--otini-fs-label); }

@media (max-width: 960px) {
  .otini-entete { position: relative; }
  .otini-nav-large { display: none; }
  .otini-nav-petit { display: block; }
  .otini-entete-in.otini-entete-in > .brxe-shortcode { display: flex; align-items: center; flex: 1 1 auto; margin-left: 0; justify-content: flex-end; }
  /* Le bouton devis passe après le menu sur petit écran. */
  .otini-entete-in.otini-entete-in > *:last-child { margin-left: 0; }
}
@media (max-width: 560px) {
  .otini-entete-in.otini-entete-in > *:last-child .otini-btn { padding: 11px 16px; font-size: 13px; }
}

/* Ligne de prix du héros : elle ne doit jamais se couper au milieu. */
.otini-hero-prix { flex-wrap: wrap; row-gap: 2px; }
.otini-hero-prix > span:first-child { white-space: nowrap; }
.otini-hero-prix b { white-space: nowrap; }
@media (max-width: 620px) {
  .otini-hero-prix { flex-direction: column; align-items: flex-start; gap: 2px; }
  .otini-hero-prix > span:last-child { padding-left: 0; }
}

/* La règle qui masque le menu sous 960 px ne doit pas atteindre le panneau
   dépliant, qui est justement là pour l'afficher. */
.otini-nav-panneau .otini-menu.otini-menu { display: flex; }
.otini-nav-panneau .otini-btn { width: 100%; justify-content: center; }

/* Sous 560 px, l'en-tête ne garde que la marque et le bouton de menu.
   Les deux actions vivent dans le panneau : trois éléments ne tiennent pas
   sur 390 px sans déborder. */
@media (max-width: 560px) {
  .otini-entete-in.otini-entete-in > *:last-child { display: none; }
  .otini-entete-in.otini-entete-in > .brxe-shortcode { margin-left: 0; }
}

/* ---- [otini_guides] ---- */
.otini-guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1px; background: var(--otini-border); border: 1px solid var(--otini-border); border-radius: var(--otini-radius-sm); overflow: hidden; box-shadow: var(--otini-ombre-1); }
.otini-guide { background: var(--otini-paper); padding: var(--otini-s5); display: flex; flex-direction: column; gap: var(--otini-s2); text-decoration: none; color: inherit; transition: background .15s ease; }
.otini-guide:hover { background: var(--otini-card); }
.otini-guide-m2 { font-family: var(--otini-mono); font-size: var(--otini-fs-h2); font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.otini-guide-t { font-family: var(--otini-display); font-size: var(--otini-fs-h3); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.otini-guide-f { font-family: var(--otini-mono); font-size: var(--otini-fs-label); letter-spacing: .04em; color: var(--otini-green-deep); margin-top: auto; padding-top: var(--otini-s3); }

/* ---- [otini_contact] ---- */
.otini-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--otini-border); border: 1px solid var(--otini-border); border-radius: var(--otini-radius-sm); overflow: hidden; box-shadow: var(--otini-ombre-1); }
@media (max-width: 700px) { .otini-contact { grid-template-columns: 1fr; } }
.otini-contact > div { background: var(--otini-paper); padding: var(--otini-s5); }
.otini-contact-v { font-family: var(--otini-mono); font-size: var(--otini-fs-h2); font-weight: 500; letter-spacing: -.02em; margin: var(--otini-s2) 0 0; }
.otini-contact-n { font-size: var(--otini-fs-ui); color: var(--otini-muted); margin-top: var(--otini-s3); line-height: 1.6; }

/* ---- Contenu éditorial des pages (post-content) ---- */
/*
 * Le contenu d'une page : la prose garde sa mesure de lecture, centrée, et les
 * blocs larges (formulaire, tableaux, galeries) s'échappent sur toute la
 * largeur utile. Sans cette grille, une page de texte occupe la moitié gauche
 * de l'écran et laisse l'autre moitié vide.
 * Bricks intercale un .brxe-post-content entre le bloc et le contenu : il est
 * neutralisé par display:contents pour que la grille voie les vrais blocs.
 */
.otini-contenu,
.otini-page-tete {
  max-width: none;
  display: grid;
  grid-template-columns:
    [pleine-start texte-start] min(var(--otini-w-text), 100%)
    [texte-end] minmax(0, 1fr)
    [pleine-end];
}
.otini-page-tete > * { grid-column: texte; min-width: 0; }
/* Variante des archives : l'en-tête part du bord de la grille, comme les cartes. */
.otini-page-tete--pleine { grid-template-columns: minmax(0, 1fr); }
.otini-page-tete--pleine > * { grid-column: 1; }
.otini-page-tete--pleine .otini-page-chapo,
.otini-page-tete--pleine h1 { max-width: 30ch; }
.otini-page-tete--pleine .otini-page-chapo { max-width: 52ch; }

.otini-faq-tete { margin-bottom: var(--otini-s6); }
/* Deux colonnes : l'en-tête reste à gauche pendant qu'on déroule les
   questions à droite. La liste retrouve toute la largeur de sa colonne. */
.otini-faq-duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--otini-s7); align-items: start; }
.otini-faq-duo > .otini-faq-tete { position: sticky; top: 96px; margin-bottom: 0; }
.otini-faq-duo .otini-faq { max-width: none; }
@media (max-width: 900px) {
  .otini-faq-duo { grid-template-columns: 1fr; gap: var(--otini-s5); }
  .otini-faq-duo > .otini-faq-tete { position: static; }
}
.otini-contenu > .otini-faq,
.otini-contenu > .brxe-post-content > .otini-faq { margin-top: var(--otini-s6); }
.otini-section--faq .otini-faq { margin-top: 0; }

/* ---- Fil d'Ariane ----
   Il vit maintenant dans sa propre barre, collée sous la navigation. Une
   ligne fine, une seule, avant que la page ne commence vraiment. */
.otini-fil-bar {
  background: var(--otini-paper);
  border-bottom: 1px solid var(--otini-border);
}
.otini-fil-bar > .otini-wrap {
  display: flex; align-items: center; min-height: 44px;
  padding-block: 0;
}
.otini-fil-ariane { margin-bottom: 0; }
.otini-fil-ariane ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--otini-s2);
  font-family: var(--otini-mono); font-size: var(--otini-fs-label);
  letter-spacing: .06em; text-transform: uppercase;
}
.otini-fil-bar .otini-fil-ariane { min-width: 0; max-width: 100%; }
.otini-fil-bar .otini-fil-ariane ol { flex-wrap: nowrap; overflow: hidden; min-width: 0; }
.otini-fil-ariane li { display: flex; align-items: center; gap: var(--otini-s2); min-width: 0; }
.otini-fil-ariane li + li::before {
  content: ""; flex: none; width: 5px; height: 5px;
  border-top: 1px solid var(--otini-border); border-right: 1px solid var(--otini-border);
  transform: rotate(45deg);
}
.otini-fil-ariane a { color: var(--otini-muted); text-decoration: none; }
.otini-fil-ariane a:hover { color: var(--otini-green-deep); text-decoration: underline; text-underline-offset: 3px; }
.otini-fil-ariane [aria-current="page"] span {
  color: var(--otini-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch;
}
/* Sur fond forêt, le fil reste lisible. */
.otini-fond-forest .otini-fil-ariane a { color: var(--otini-on-forest-muted); }
.otini-fond-forest .otini-fil-ariane [aria-current="page"] span { color: var(--otini-on-forest); }
.otini-fond-forest .otini-fil-ariane li + li::before { border-color: rgba(251, 252, 248, .35); }

/* En-tête de page : fil, surtitre de type, titre, puis chapô. */
.otini-page-type { margin: 0 0 var(--otini-s3); }
.otini-page-tete h1 { margin: 0; }
/* Les gabarits à deux colonnes démarrent à la même distance de l'en-tête que
   les pages simples : sans cela le site ouvre à 48 px ici et à 80 px ailleurs. */
.otini-section--tete-large { padding-block: clamp(44px, 6vw, 80px) var(--otini-s7); }
.otini-section--rappel { border-top: 1px solid var(--otini-border); }
.otini-section--rappel .otini-pile { max-width: var(--otini-w-text); }
.otini-page-chapo {
  font-size: clamp(17px, 1.6vw, 20px); font-weight: 300; line-height: 1.55;
  color: var(--otini-muted); margin-top: var(--otini-s4); max-width: 48ch;
}
.otini-page-chapo:empty { display: none; }
.otini-contenu > .brxe-post-content { display: contents; }
.otini-contenu > *,
.otini-contenu > .brxe-post-content > * { grid-column: texte; min-width: 0; }
.otini-contenu > * + *,
.otini-contenu > .brxe-post-content > * + * { margin-top: var(--otini-s5); }
.otini-contenu > h2, .otini-contenu > .brxe-post-content > h2 { font-family: var(--otini-display); font-size: var(--otini-fs-h2); font-weight: 600; letter-spacing: -.025em; line-height: 1.12; margin-top: var(--otini-s8); }
.otini-contenu > h2:first-child, .otini-contenu > .brxe-post-content > h2:first-child { margin-top: 0; }
.otini-contenu > h3, .otini-contenu > .brxe-post-content > h3 { font-family: var(--otini-display); font-size: var(--otini-fs-h3); font-weight: 600; letter-spacing: -.015em; margin-top: var(--otini-s6); }
.otini-contenu > p, .otini-contenu > .brxe-post-content > p { line-height: 1.68; }
.otini-contenu > ul, .otini-contenu > .brxe-post-content > ul { padding-left: 0; list-style: none; }
.otini-contenu > ul > li, .otini-contenu > .brxe-post-content > ul > li { position: relative; padding-left: 22px; line-height: 1.7; margin-top: var(--otini-s2); }
.otini-contenu > ul > li::before, .otini-contenu > .brxe-post-content > ul > li::before { content: "\2014"; position: absolute; left: 0; color: var(--otini-green-deep); font-family: var(--otini-mono); }
.otini-contenu strong { font-weight: 500; }
.otini-contenu p em,
.otini-contenu li em { font-style: normal; background: var(--otini-amber-soft); padding: 1px 6px; font-family: var(--otini-mono); font-size: .9em; }
/* Les blocs de shortcode gardent leur propre typographie. */
.otini-demande em, .otini-contact em, .otini-gamme em {
  font-style: normal; background: none; padding: 0; font-family: inherit; font-size: inherit;
}
/* Les blocs de shortcode reprennent toute la largeur utile. */
.otini-contenu > .otini-tableau-wrap,
.otini-contenu > .otini-guides,
.otini-contenu > .otini-etapes,
.otini-contenu > .otini-gamme,
.otini-contenu > .otini-contact,
.otini-contenu > .otini-venir,
.otini-contenu > .otini-galerie,
.otini-contenu > .brxe-post-content > .otini-tableau-wrap,
.otini-contenu > .brxe-post-content > .otini-guides,
.otini-contenu > .brxe-post-content > .otini-etapes,
.otini-contenu > .brxe-post-content > .otini-gamme,
.otini-contenu > .brxe-post-content > .otini-contact,
.otini-contenu > .brxe-post-content > .otini-venir,
.otini-contenu > .brxe-post-content > .otini-galerie {
  grid-column: pleine; max-width: none; width: 100%;
  margin-top: var(--otini-s8);
}

/* ==========================================================================
   Formulaire de demande — trois étapes
   Il emprunte le vocabulaire des sections du site : surtitre mono, titre
   d'affichage, cartes de la gamme, filets. Rien de propre au formulaire.
   Le découpage est porté par .otini-demande--pas, posée par le script :
   sans elle tout s'affiche à la suite et l'envoi fonctionne à l'identique.
   ========================================================================== */

.otini-demande {
  background: var(--otini-card);
  border: 1px solid var(--otini-border); border-radius: var(--otini-radius-lg);
  padding: clamp(28px, 4.5vw, 64px);
  scroll-margin-top: var(--otini-s7);
}
.otini-contenu > .otini-demande,
.otini-contenu > .otini-recu,
.otini-contenu > .brxe-post-content > .otini-demande,
.otini-contenu > .brxe-post-content > .otini-recu {
  grid-column: pleine; max-width: none; width: 100%;
  margin-top: var(--otini-s8);
}
/* Le titre qui suit un bloc large repart avec la même respiration. */
.otini-contenu > .brxe-post-content > .otini-demande + h2,
.otini-contenu > .brxe-post-content > .otini-recu + h2 { margin-top: var(--otini-s8); }

/* ---- Fil d'avancement ---- */
.otini-fil {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--otini-s5);
  list-style: none; margin: 0 0 clamp(32px, 5vw, 64px); padding: 0;
}
.otini-fil-p {
  display: flex; align-items: baseline; gap: var(--otini-s3);
  padding-bottom: var(--otini-s3);
  border-bottom: 1px solid var(--otini-border);
  transition: border-color .2s ease;
}
.otini-fil-n,
.otini-fil-l {
  font-family: var(--otini-mono); font-size: var(--otini-fs-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--otini-muted);
  transition: color .2s ease;
}
.otini-fil-l { letter-spacing: .09em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.otini-fil-p.est-faite { border-bottom-color: var(--otini-green-deep); cursor: pointer; }
.otini-fil-p.est-faite .otini-fil-n,
.otini-fil-p.est-faite .otini-fil-l { color: var(--otini-green-deep); }
.otini-fil-p.est-active { border-bottom: 2px solid var(--otini-forest); padding-bottom: calc(var(--otini-s3) - 1px); }
.otini-fil-p.est-active .otini-fil-n { color: var(--otini-green-deep); }
.otini-fil-p.est-active .otini-fil-l { color: var(--otini-ink); }

/* ---- Une étape ----
   Même grille que le contenu de la page : les titres du formulaire tombent
   donc exactement à l'aplomb des titres de la prose, et seules les cartes
   s'étalent sur toute la largeur du panneau. */
.otini-pas {
  display: grid;
  grid-template-columns:
    [pleine-start texte-start] min(var(--otini-w-text), 100%)
    [texte-end] minmax(0, 1fr)
    [pleine-end];
}
.otini-pas > * { grid-column: texte; min-width: 0; }
.otini-pas > .otini-choix,
.otini-pas > .otini-pas-nav { grid-column: pleine; }
.otini-pas[hidden] { display: none; }
.otini-pas.est-active { animation: otini-pas .32s cubic-bezier(.22,.61,.36,1) both; }
@keyframes otini-pas { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.otini-pas-k { margin: 0 0 var(--otini-s3); }
.otini-pas-t {
  font-family: var(--otini-display); font-weight: 600;
  font-size: var(--otini-fs-display-s); line-height: 1.04; letter-spacing: -.025em;
  color: var(--otini-ink); margin: 0; max-width: 20ch;
}
.otini-pas-s {
  font-size: var(--otini-fs-body); font-weight: 300; line-height: 1.6;
  color: var(--otini-muted); margin: var(--otini-s4) 0 clamp(28px, 4vw, 48px); max-width: 52ch;
}
.otini-pas-nav {
  display: flex; gap: var(--otini-s3); flex-wrap: wrap;
  margin-top: clamp(28px, 4vw, 48px); padding-top: var(--otini-s5);
  border-top: 1px solid var(--otini-border);
}
.otini-btn--fantome { background: transparent; color: var(--otini-ink); border-color: var(--otini-border); }
.otini-pas-nav .otini-btn--principal,
.otini-pas-nav .otini-btn--accent { margin-left: auto; }
.otini-pas-nav .otini-btn--principal:only-child,
.otini-pas-nav .otini-btn--accent:only-child { margin-left: 0; }

/* ---- Étape 1 : les cartes de la gamme, rendues sélectionnables ---- */
.otini-choix {
  border: 0; padding: 0; margin: 0; min-width: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--otini-s5);
}
.otini-choix-c {
  position: relative; cursor: pointer; display: flex; flex-direction: column;
  transition: box-shadow .15s ease, transform .2s ease;
}
.otini-choix-c:has(input:focus-visible) { border-radius: var(--otini-radius-sm); }
.otini-choix-c input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.otini-choix-c:hover { transform: translateY(-3px); }
.otini-choix-c:has(input:focus-visible) { outline: 2px solid var(--otini-green-deep); outline-offset: 3px; }
.otini-choix-c .otini-carte-corps { border-color: var(--otini-border); transition: border-color .15s ease; }
.otini-choix-c:has(input:checked) { transform: none; border-color: var(--otini-forest); box-shadow: 0 0 0 2px var(--otini-forest), var(--otini-ombre-1); }
/* Une fois coché, le lien annonce l'état plutôt que l'action. */
.otini-choix-c:has(input:checked) .otini-carte-go { color: var(--otini-forest); font-weight: 500; font-size: 0; }
.otini-choix-c:has(input:checked) .otini-carte-go::before {
  content: attr(data-libelle-choisi) " ✓"; font-size: var(--otini-fs-ui);
}
.otini-choix-c .otini-carte-im { display: grid; place-items: center; }
.otini-choix-c .otini-carte-im img { grid-area: 1 / 1; }
.otini-choix-pic { width: 34px; height: 34px; color: var(--otini-muted); }
/* Pas de photo : une trame lisible, pas un rectangle blanc. */
.otini-choix-c--neutre .otini-carte-im {
  background: repeating-linear-gradient(45deg, var(--otini-green-soft) 0 9px, var(--otini-card) 9px 18px);
}
.otini-choix-c--neutre .otini-choix-pic { color: var(--otini-green-deep); opacity: .45; }
.otini-choix-c--neutre .otini-carte-nm { font-size: var(--otini-fs-h3); }
.otini-choix-note {
  font-size: var(--otini-fs-ui); font-weight: 300; line-height: 1.55;
  color: var(--otini-muted); display: block;
}
.otini-choix-ok {
  position: absolute; top: var(--otini-s3); right: var(--otini-s3); z-index: 1;
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: var(--otini-radius-pill);
  background: var(--otini-forest); color: var(--otini-on-forest);
  opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .15s ease;
}
.otini-choix-c:has(input:checked) .otini-choix-ok { opacity: 1; transform: none; }
.otini-choix.est-en-erreur .otini-carte-corps { border-color: var(--otini-amber-deep); }

/* ---- Le choix rappelé au-dessus des étapes 2 et 3 ---- */
.otini-resume {
  display: flex; align-items: center; gap: var(--otini-s4);
  background: var(--otini-paper); border: 1px solid var(--otini-border);
  border-radius: var(--otini-radius-sm); box-shadow: var(--otini-ombre-1);
  padding: var(--otini-s3) var(--otini-s4);
  margin-bottom: clamp(28px, 4vw, 48px);
  animation: otini-pas .3s cubic-bezier(.22,.61,.36,1) both;
}
.otini-resume[hidden] { display: none; }
.otini-resume-im {
  flex: none; width: 56px; height: 44px; border-radius: var(--otini-radius-xs);
  background: var(--otini-card) center / cover no-repeat;
}
.otini-resume-im.est-vide { background: repeating-linear-gradient(45deg, var(--otini-card) 0 8px, var(--otini-hair) 8px 16px); }
.otini-resume-tx { display: grid; gap: 2px; min-width: 0; }
.otini-resume-nm {
  font-family: var(--otini-sans); font-weight: 500; font-size: var(--otini-fs-ui);
  color: var(--otini-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.otini-resume-ch {
  margin-left: auto; flex: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--otini-mono); font-size: var(--otini-fs-label);
  letter-spacing: .09em; text-transform: uppercase; color: var(--otini-green-deep);
}
.otini-resume-ch:hover { color: var(--otini-forest); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Étape 2 : les champs ---- */
.otini-grille {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--otini-s5) var(--otini-s5); align-items: start;
  max-width: 720px;
}
.otini-champ--plein { grid-column: 1 / -1; }
.otini-champ label {
  display: block; font-family: var(--otini-mono); font-size: var(--otini-fs-label);
  letter-spacing: .09em; text-transform: uppercase; color: var(--otini-muted); margin-bottom: var(--otini-s2);
}
.otini-champ abbr { color: var(--otini-green-deep); text-decoration: none; border: 0; margin-left: 3px; }
.otini-champ input {
  width: 100%; font-family: var(--otini-sans); font-size: var(--otini-fs-body); font-weight: 300;
  color: var(--otini-ink); background: var(--otini-paper);
  border: 1px solid var(--otini-border); border-radius: var(--otini-radius-xs);
  padding: 15px 16px; transition: border-color .15s ease, box-shadow .15s ease;
}
.otini-champ input:focus {
  outline: none; border-color: var(--otini-green-deep); box-shadow: inset 0 0 0 1px var(--otini-green-deep);
}
.otini-champ input::placeholder { color: var(--otini-muted); opacity: .55; }
.otini-champ-in { display: block; position: relative; }
.otini-champ-ok {
  position: absolute; top: 50%; right: 14px; margin-top: -11px;
  width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: var(--otini-radius-pill);
  background: var(--otini-green-deep); color: var(--otini-paper);
  opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
.otini-champ.est-remplie .otini-champ-ok { opacity: 1; transform: none; }
.otini-champ.est-remplie input { padding-right: 46px; border-color: var(--otini-green-deep); }
.otini-champ.est-en-erreur .otini-champ-ok { display: none; }
.otini-champ.est-en-erreur input { border-color: var(--otini-amber-deep); box-shadow: inset 0 0 0 1px var(--otini-amber-deep); }
.otini-champ-err {
  font-family: var(--otini-mono); font-size: var(--otini-fs-label); letter-spacing: .02em;
  color: #8A5D06; margin: var(--otini-s2) 0 0;
}
.otini-champ-err[hidden] { display: none; }
.otini-champ-aide { font-size: var(--otini-fs-label); color: var(--otini-muted); margin: var(--otini-s2) 0 0; }
.otini-champ.est-en-erreur .otini-champ-aide { display: none; }

/* ---- Étape 3 : récapitulatif, lu comme une fiche technique ---- */
.otini-recap { margin: 0; background: var(--otini-paper); border: 1px solid var(--otini-border); border-radius: var(--otini-radius-sm); overflow: hidden; box-shadow: var(--otini-ombre-1); }
.otini-recap-l {
  display: grid; grid-template-columns: 220px minmax(0, 1fr) auto;
  align-items: baseline; gap: var(--otini-s4);
  padding: var(--otini-s4) var(--otini-s5);
  border-bottom: 1px solid var(--otini-hair);
}
.otini-recap-l:last-child { border-bottom: 0; }
.otini-recap dt {
  font-family: var(--otini-mono); font-size: var(--otini-fs-label);
  letter-spacing: .09em; text-transform: uppercase; color: var(--otini-muted);
}
.otini-recap dd { margin: 0; font-size: var(--otini-fs-body); font-weight: 300; color: var(--otini-ink); overflow-wrap: anywhere; }
.otini-recap-m {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--otini-mono); font-size: var(--otini-fs-label);
  letter-spacing: .09em; text-transform: uppercase; color: var(--otini-green-deep);
}
.otini-recap-m:hover { color: var(--otini-forest); text-decoration: underline; text-underline-offset: 3px; }

.otini-form-erreurs { margin: var(--otini-s2) 0 0; padding-left: 18px; font-size: var(--otini-fs-ui); }
.otini-form-erreurs a { color: inherit; }

/* ---- Accusé de réception ---- */
.otini-recu {
  background: var(--otini-forest); color: var(--otini-on-forest);
  border-radius: var(--otini-radius-lg);
  padding: clamp(36px, 6vw, 88px); scroll-margin-top: var(--otini-s7);
}
.otini-recu .otini-surtitre { color: var(--otini-amber); }
.otini-recu-t {
  font-family: var(--otini-display); font-weight: 600;
  font-size: var(--otini-fs-display-s); line-height: 1.04; letter-spacing: -.025em;
  margin: var(--otini-s3) 0 0; max-width: 18ch; color: var(--otini-on-forest);
}
.otini-recu-s {
  font-size: var(--otini-fs-body); font-weight: 300; line-height: 1.6;
  color: var(--otini-on-forest-muted); margin: var(--otini-s4) 0 0; max-width: 46ch;
}
.otini-recu-tel {
  margin-top: clamp(28px, 4vw, 48px); padding-top: var(--otini-s5);
  border-top: 1px solid rgba(251, 252, 248, .22);
}
.otini-recu-tel a {
  display: block; margin-top: var(--otini-s2);
  font-family: var(--otini-mono); font-size: clamp(20px, 2.2vw, 28px);
  color: var(--otini-on-forest); text-decoration: none; letter-spacing: -.01em;
}
.otini-recu-tel a:hover { color: var(--otini-amber); }

/* ---- Sans JavaScript : une seule page, sans fil ni récapitulatif ---- */
.otini-demande:not(.otini-demande--pas) .otini-fil,
.otini-demande:not(.otini-demande--pas) .otini-pas-k,
.otini-demande:not(.otini-demande--pas) [data-nav],
.otini-demande:not(.otini-demande--pas) [data-etape="3"] .otini-pas-t,
.otini-demande:not(.otini-demande--pas) [data-etape="3"] .otini-pas-s,
.otini-demande:not(.otini-demande--pas) .otini-recap { display: none; }
.otini-demande:not(.otini-demande--pas) .otini-pas + .otini-pas {
  margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--otini-border);
}
.otini-demande.otini-demande--pas noscript { display: none; }

/* Piège à robots : masqué à l'œil, pas au lecteur d'écran des robots. */
.otini-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Masqué à l'écran, lu par les lecteurs d'écran. */
.otini-vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 900px) {
  .otini-choix { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--otini-s4); }
}
@media (max-width: 760px) {
  .otini-grille { grid-template-columns: 1fr; }
  .otini-recap-l { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--otini-s1); padding: var(--otini-s4); }
  .otini-recap dt { grid-column: 1 / -1; }
  .otini-fil { gap: var(--otini-s3); }
  .otini-fil-p:not(.est-active) .otini-fil-l { display: none; }
  .otini-pas-t { max-width: none; }
}

/* Sur un téléphone, six vignettes empilées font une page à rallonge :
   les cartes passent en lignes, image à gauche. */
@media (max-width: 560px) {
  .otini-choix { grid-template-columns: 1fr; gap: var(--otini-s3); }
  .otini-choix-c { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: stretch; }
  .otini-choix-c .otini-carte-im { aspect-ratio: auto; min-height: 104px; }
  /* En rangée, la photo se rogne à gauche et non en haut. */
  .otini-choix-c .otini-carte-im img { border-radius: 15px 0 0 15px; }
  /* Sur 390 px de large, la fiche complète se disloque : le nom, le prix et la
     surface suffisent à choisir, le reste est sur la page du modèle. */
  .otini-choix-c .otini-carte-sp span:not(:first-child) { display: none; }
  .otini-choix-c .otini-carte-sp span:first-child::after { content: ""; }
  .otini-choix-c .otini-carte-reg { display: none; }
  .otini-choix-c--neutre .otini-choix-note { display: none; }
  .otini-choix-c--neutre .otini-carte-reg { display: flex; border-top: 0; padding-top: 0; margin-top: 0; }
  .otini-choix-c--neutre .otini-carte-reg .otini-carte-go { display: none; }
  .otini-choix-c .otini-carte-nm {
    position: static; background: none; color: var(--otini-ink);
    padding: 0; font-size: var(--otini-fs-ui);
  }
  .otini-choix-c .otini-carte-im .otini-carte-nm { display: none; }
  .otini-choix-c .otini-carte-corps {
    border-top: 1px solid var(--otini-border); border-left: 0;
    gap: 2px; padding: var(--otini-s3) var(--otini-s4); justify-content: center;
  }
  .otini-choix-c .otini-carte-corps::before {
    content: attr(data-nom);
    font-family: var(--otini-display); font-weight: 600; font-size: var(--otini-fs-ui);
    letter-spacing: -.015em; color: var(--otini-ink);
  }
  .otini-choix-pic { width: 26px; height: 26px; }
  .otini-choix-ok { top: var(--otini-s2); right: auto; left: var(--otini-s2); width: 22px; height: 22px; }
  .otini-pas-nav { flex-direction: column-reverse; }
  .otini-pas-nav .otini-btn { justify-content: center; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .otini-pas.est-active { animation: none; }
  .otini-choix-c { transition: none; }
  .otini-choix-c:hover { transform: none; }
}

/* La vidéo du dépliage quand un média est réglé : elle occupe le cadre à la
   place de l'image d'attente, au même rapport et au même rayon. */
.otini-video--joue video {
  display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover;
  border-radius: inherit; background: #0d1409;
}
.otini-video--joue .otini-play { display: none; }
/* La mention ne doit pas chevaucher la barre de lecture de la vidéo. */
.otini-video--joue .otini-mention { top: var(--otini-s3); bottom: auto; right: var(--otini-s3); left: auto; }

/* ==========================================================================
   RYTHME VERTICAL
   Bricks pose une marge basse de 1,2 em sur chacun de ses paragraphes. Dans
   un conteneur flex à gouttière, elle s'ajoute à la gouttière : un surtitre
   suivi d'un titre laissait 38 px au lieu des 24 de l'échelle, sur treize
   pages. La gouttière décide seule, les marges de Bricks sont neutralisées.
   ========================================================================== */
.otini-pile > *,
.otini-boutons > * { margin-block: 0; }
/* Les en-têtes de page ne sont pas des piles flex : leur rythme est écrit
   ligne à ligne et n'a pas besoin d'être remis à zéro. */

/* Un bloc de shortcode collé au dernier paragraphe du bloc de texte qui le
   précède : il lui faut la respiration d'une fin de propos. */
.otini-wrap > .otini-pile + .brxe-shortcode,
.otini-wrap > .otini-pile + [class*="otini-"] { margin-top: var(--otini-s7); }

/* Les blocs larges ont besoin d'un rembourrage à leur mesure : 24 px sur une
   carte de 1 150 px serrait le texte contre le filet. */
.otini-perimetre > div { padding: var(--otini-s6); }
.otini-guide { padding: var(--otini-s6); }
.otini-carte-corps { padding: var(--otini-s5) var(--otini-s5) var(--otini-s5); }

/* Périmètre : l'étiquette respire au-dessus de sa liste, et les lignes de la
   liste ont leur propre interligne plutôt qu'un simple line-height étiré. */
.otini-perimetre .otini-liste { margin-top: var(--otini-s4); line-height: 1.6; }
.otini-perimetre .otini-liste li + li { margin-top: var(--otini-s3); }
.otini-liste li { padding-left: 26px; }

@media (max-width: 700px) {
  .otini-perimetre > div,
  .otini-guide { padding: var(--otini-s5); }
}

/* Cartes « venir » : la gouttière de 2 px s'ajoutait aux marges et donnait des
   écarts de 14 et 6 px. La gouttière passe à zéro, chaque écart est nommé. */
.otini-venir-c { gap: 0; }
.otini-venir-c .otini-surtitre { margin-bottom: var(--otini-s2); }
.otini-venir-c .otini-venir-v + .otini-venir-n,
.otini-venir-c .otini-venir-n + .otini-venir-n { margin-top: var(--otini-s1); }
.otini-venir-c .otini-venir-n--fort { margin-top: var(--otini-s1); }
.otini-venir-a { padding-top: var(--otini-s5); }

/* Carte de modèle : la ligne de specs et la ligne de régime se suivaient à
   31 px, valeur qui n'est sur aucune échelle. */
.otini-carte-sp + .otini-carte-reg,
.otini-choix-note + .otini-carte-reg { margin-top: var(--otini-s3); }

/* PAGE INTROUVABLE — un en-tête, trois cartes, le téléphone. */
.otini-introuvable { padding-block: var(--otini-s6) var(--otini-s4); }
.otini-introuvable .otini-d1 { max-width: 16ch; margin-top: var(--otini-s3); }
.otini-introuvable .otini-page-chapo { max-width: 52ch; margin-top: var(--otini-s4); }
.otini-introuvable-cartes { margin-top: var(--otini-s7); }
.otini-introuvable-tel { margin-top: var(--otini-s6); color: var(--otini-muted); font-size: var(--otini-fs-ui); }
.otini-introuvable-tel a { font-family: var(--otini-mono); color: var(--otini-ink); text-decoration: none; border-bottom: 1px solid var(--otini-green); white-space: nowrap; }