/*
Theme Name: domo-malin
Theme URI: https://www.domo-malin.fr
Author: domo-malin
Description: La soiree. Creme chaude, brun profond, un seul accent ambre. Une grande photographie en ouverture avec le cartouche qui la chevauche, les pieces de la maison en pilules, une mosaique de tuiles inegales, la redaction en portrait rond qui deborde.
Version: 1.0.0
Text Domain: domo-malin
*/

/* =========================================================
   JETONS
   Contrastes calcules sur le fond creme #F4EDE3 :
     encre  #2A1F1A  13,6:1
     encre2 #5E4F45   7,0:1
     gris   #8E7F72   3,9:1  (metadonnees en 14 px et plus, gras)
     gris2  #7A6B5E   4,9:1  (texte secondaire, AA)
     ambre  #D9822B   2,6:1  jamais en texte sur clair
     ambre2 #9C5613   4,9:1  en texte
   Bouton ambre : texte encre dessus, 5,3:1.
   Sur l encre : creme 13,6:1, ambre 5,2:1.
   ========================================================= */
:root {
  --creme:  #F4EDE3;
  --creme2: #EADFCF;
  --blanc:  #FFFFFF;
  --encre:  #2A1F1A;
  --encre2: #5E4F45;
  --gris:   #7A6B5E;
  --trait:  #DDD0BF;
  --ambre:  #D9822B;
  --ambre2: #9C5613;

  --titre: "Fraunces", Georgia, serif;
  --texte: "Hanken Grotesk", "Segoe UI", sans-serif;

  /* gamme fermee */
  --t0: 12px;
  --t1: 13px;
  --t2: 14px;
  --t3: 15.5px;
  --t4: 17px;
  --t5: 20px;
  --t6: 24px;
  --t7: 30px;
  --t8: clamp(28px, 3.2vw, 38px);
  --t9: clamp(38px, 5vw, 60px);

  /* un seul systeme de formes : doux, 10 px, pilule pour l interactif, rond pour les portraits */
  --r: 10px;
  --pilule: 999px;

  --ombre: 0 24px 50px -20px rgba(42, 31, 26, .45), 0 6px 14px -8px rgba(42, 31, 26, .25);
  --ombre-douce: 0 12px 28px -14px rgba(42, 31, 26, .3);
  --mouvement: cubic-bezier(.16, 1, .3, 1);
}

/* =========================================================
   BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; max-width: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; max-width: 100%; position: relative;
  background: var(--creme); color: var(--encre);
  font-family: var(--texte); font-size: var(--t4); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Atmosphere : une lueur ambree fixe en haut a droite, comme une
   lampe allumee derriere la page. Coupee sur les articles, qui se
   lisent sur du blanc pur. */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(800px 500px at 90% 0%, rgba(217, 130, 43, .18), rgba(217, 130, 43, 0) 70%);
}
body.single { background: var(--blanc); }
body.single::before { display: none; }

main, header, footer { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--titre); margin: 0; line-height: 1.05; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }

.salon { width: min(1180px, 100% - 48px); margin-left: auto; margin-right: auto; }

.saut-plan { position: absolute; left: -9999px; top: 0; background: var(--encre); color: var(--creme); padding: 10px 16px; z-index: 999; border-radius: var(--r); }
.saut-plan:focus { left: 8px; top: 8px; }
.hors-ecran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.vide { color: var(--gris); font-size: var(--t3); grid-column: 1 / -1; }

/* =========================================================
   LINTEAU (en-tete)
   ========================================================= */
.linteau { position: sticky; top: 0; z-index: 50; background: rgba(244, 237, 227, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s ease; }
.linteau.est-fixe { border-bottom-color: var(--trait); }
.linteau-rang { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.cachet { display: inline-flex; align-items: center; gap: 10px; font-family: var(--titre); font-size: var(--t6); font-weight: 700; color: var(--encre); }
.cachet svg { flex: none; }
.cachet-clair { color: var(--creme); }

.circuit { display: flex; align-items: center; gap: 28px; font-size: var(--t3); font-weight: 600; color: var(--encre2); }
.circuit a { transition: color .2s ease; }
.circuit a:hover { color: var(--ambre2); }
.circuit-contact { border: 1.5px solid var(--encre); border-radius: var(--pilule); padding: 8px 18px; color: var(--encre); transition: background .2s ease, color .2s ease; }
.circuit-contact:hover { background: var(--encre); color: var(--creme) !important; }
.circuit-fermer { display: none; }

.bouton-menu { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 10px; flex-direction: column; justify-content: center; gap: 6px; }
.bouton-menu span { display: block; height: 2px; background: var(--encre); border-radius: var(--pilule); }

/* =========================================================
   LA SOIREE (ouverture)
   ========================================================= */
.soiree { position: relative; margin-top: 10px; height: 620px; }
.soiree-vue { position: absolute; inset: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--ombre); }
.soiree-vue img { width: 100%; height: 100%; object-fit: cover; }
.soiree-vue::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 31, 26, 0) 40%, rgba(42, 31, 26, .35) 100%); }
.cartouche { position: absolute; left: 0; bottom: -70px; width: min(640px, 92%); background: var(--creme); border-radius: var(--r); padding: 40px 44px 44px; box-shadow: var(--ombre); }
.cartouche-h { font-size: var(--t9); letter-spacing: -.02em; }
.cartouche-h em { display: block; font-style: italic; font-weight: 500; font-size: var(--t6); color: var(--encre2); margin-top: 10px; line-height: 1.25; letter-spacing: 0; }
.cartouche-chapo { color: var(--encre2); margin: 18px 0 22px; max-width: 46ch; }

.appel {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ambre); color: var(--encre);
  font-size: var(--t3); font-weight: 700; padding: 14px 24px; border-radius: var(--pilule);
  box-shadow: 0 14px 30px -12px rgba(217, 130, 43, .8);
  transition: transform .25s var(--mouvement), box-shadow .25s ease;
}
.appel:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(217, 130, 43, .9); }

/* =========================================================
   LES PIECES
   ========================================================= */
.pieces { margin-top: 120px; margin-bottom: 70px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pieces-titre { font-size: var(--t1); font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: .08em; margin-right: 8px; }
.piece { font-family: var(--titre); font-weight: 500; font-size: var(--t4); padding: 10px 18px; border: 1.5px solid var(--encre); border-radius: var(--pilule); transition: background .2s ease, color .2s ease; }
.piece:hover { background: var(--encre); color: var(--creme); }

/* =========================================================
   LA MOSAIQUE
   La forme de chaque tuile vient de sa position : la premiere est
   haute et prend deux rangees, les deux suivantes remplissent la
   colonne de droite, puis les rangees alternent une etroite et une
   large, jamais trois egales.
   ========================================================= */
.mosaique { display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px; margin-bottom: 100px; }
.tuile { background: var(--blanc); border-radius: var(--r); overflow: hidden; box-shadow: var(--ombre); display: flex; flex-direction: column; transition: transform .3s var(--mouvement); }
.tuile:hover { transform: translateY(-3px); }
.tuile-vue img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.tuile-mot { padding: 20px 24px 24px; }
.repere { display: inline-block; font-size: var(--t0); font-weight: 700; color: var(--ambre2); text-transform: uppercase; letter-spacing: .08em; }
.tuile-h { font-size: var(--t6); margin: 6px 0 8px; line-height: 1.15; }
.tuile-h a:hover { color: var(--ambre2); }
.tuile-chapo { color: var(--encre2); margin: 0 0 8px; font-size: var(--t3); }
.note { font-size: var(--t2); color: var(--gris); }

.tuile-grande { grid-column: 1 / 4; grid-row: span 2; }
.tuile-grande .tuile-vue { flex: 1; min-height: 0; }
.tuile-grande .tuile-vue img { aspect-ratio: 3 / 4; height: 100%; }
.tuile-grande .tuile-h { font-size: var(--t8); }
.tuile:nth-child(2), .tuile:nth-child(3) { grid-column: 4 / 7; }
.tuile:nth-child(4n + 4), .tuile:nth-child(4n + 7) { grid-column: span 2; }
.tuile:nth-child(4n + 5), .tuile:nth-child(4n + 6) { grid-column: span 4; }
.tuile:nth-child(4n + 4) .tuile-vue img, .tuile:nth-child(4n + 7) .tuile-vue img { aspect-ratio: 3 / 2; }
.tuile:nth-child(4n + 5) .tuile-vue img, .tuile:nth-child(4n + 6) .tuile-vue img { aspect-ratio: 21 / 9; }

/* la mosaique des rubriques et de la recherche : pas de grande, la
   premiere tuile suit la meme alternance que les autres */
.zone-liste .tuile-grande, .releve .tuile-grande { grid-column: 1 / 4; grid-row: auto; }
.zone-liste .tuile-grande .tuile-vue img, .releve .tuile-grande .tuile-vue img { aspect-ratio: 16 / 9; height: auto; }
.zone-liste .tuile:nth-child(2), .zone-liste .tuile:nth-child(3), .releve .tuile:nth-child(2), .releve .tuile:nth-child(3) { grid-column: span 3; }

/* =========================================================
   LA REDACTION
   ========================================================= */
.redaction { background: var(--creme2); border-radius: var(--r); padding: 48px 56px 48px 220px; position: relative; margin-top: 60px; margin-bottom: 100px; }
.redaction-portrait { position: absolute; left: 44px; top: -40px; width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 6px solid var(--creme); box-shadow: var(--ombre); }
.redaction-nom { font-size: var(--t8); }
.redaction-role { color: var(--ambre2); font-size: var(--t2); font-weight: 700; margin: 6px 0 14px; }
.redaction-bio { color: var(--encre2); max-width: 72ch; }
.redaction-bio p { margin: 0 0 12px; }
.redaction-bio ul { margin: 0 0 12px; padding-left: 20px; }
.redaction-bio li { margin-bottom: 6px; }
.redaction-bio strong { color: var(--encre); }

/* =========================================================
   SEMELLE (pied de page)
   ========================================================= */
.semelle { border-top: 1.5px solid var(--encre); padding-top: 30px; padding-bottom: 40px; font-size: var(--t2); color: var(--encre2); }
.semelle-l1 { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.semelle-liens { display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 600; color: var(--encre); }
.semelle-liens a:hover { color: var(--ambre2); }
.semelle-l2 { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--trait); display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; }
.semelle-dire { margin: 0; }
.semelle-recent { display: flex; flex-direction: column; gap: 6px; }
.semelle-recent a { color: var(--encre); }
.semelle-recent a:hover { color: var(--ambre2); }
.semelle-droit { margin: 22px 0 0; color: var(--gris); }
.semelle .cachet { color: var(--encre); }

/* =========================================================
   FIL CONDUCTEUR (fil d ariane)
   ========================================================= */
.fil-conducteur { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 22px; font-size: var(--t2); color: var(--gris); }
.fil-conducteur a:hover { color: var(--encre); }
.fil-conducteur span:last-child { color: var(--encre2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }

/* =========================================================
   FICHE (article) : colonne unique, blanche, centree.
   Tete, image, corps et pied portent le meme plafond.
   ========================================================= */
.fiche-tete, .fiche-vue, .fiche-corps, .fiche-pied { max-width: 860px; }
.fiche-tete { padding-top: 26px; }
.fiche-h { font-size: var(--t9); letter-spacing: -.02em; line-height: 1.04; margin: 12px 0 18px; }
.fiche-signe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: var(--t2); color: var(--gris); padding-bottom: 26px; }
.fiche-etoiles .kk-star-ratings { margin: 0; }

.fiche-vue { margin-top: 0; margin-bottom: 0; }
.fiche-vue img { width: 100%; height: auto; border-radius: var(--r); box-shadow: var(--ombre); }

.fiche-corps { padding-top: 40px; font-size: var(--t4); line-height: 1.75; }
.fiche-corps h2 { font-size: var(--t7); margin: 1.7em 0 .5em; }
.fiche-corps h3 { font-size: var(--t6); margin: 1.4em 0 .4em; }
.fiche-corps a { color: var(--encre); text-decoration: underline; text-decoration-color: var(--ambre); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fiche-corps a:hover { color: var(--ambre2); }
.fiche-corps ul, .fiche-corps ol { padding-left: 22px; }
.fiche-corps li { margin-bottom: .45em; }
.fiche-corps img { margin: 1.5em 0; border-radius: var(--r); box-shadow: var(--ombre-douce); }
.fiche-corps table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: var(--t3); }
.fiche-corps th, .fiche-corps td { padding: 13px 15px; border-bottom: 1px solid var(--trait); text-align: left; }
.fiche-corps th { background: var(--creme); font-weight: 700; color: var(--encre); }
.fiche-corps blockquote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--ambre); color: var(--encre2); font-family: var(--titre); font-style: italic; font-size: var(--t5); }
.fiche-corps blockquote p { margin: 0; }

.dml-aussi { display: block; margin: 1.9em 0; padding: 22px 26px; background: var(--creme); border-radius: var(--r); box-shadow: var(--ombre-douce); }
.dml-aussi b { display: block; margin-bottom: 8px; font-size: var(--t0); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.dml-aussi a { font-family: var(--titre); font-size: var(--t5); font-weight: 700; line-height: 1.24; color: var(--encre) !important; text-decoration: none !important; }
.dml-aussi a:hover { color: var(--ambre2) !important; }

/* Blocs de la chaine de contenu. Son prefixe change a chaque
   version et d un site a l autre : les selecteurs portent donc
   sur la FIN du nom de classe, jamais sur un prefixe nomme en dur.
   Le picto est centre verticalement sur le point a savoir. */
.fiche-corps [class$="-key-top"] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }

.fiche-corps [class$="-key"] ul { padding-left: 0; }
.fiche-corps [class$="-key"] li { position: relative; list-style: none; padding-left: 34px; }
.fiche-corps [class$="-key"] li::before {
  content: ''; position: absolute; left: 0; top: 50%; margin-top: -10px;
  width: 20px; height: 20px;
  border-radius: 50%; background: var(--ambre); opacity: .32;
}
.fiche-corps [class$="-key"] li::after {
  content: ''; position: absolute; left: 6.5px; top: 50%; margin-top: -5px;
  width: 5px; height: 9px;
  border: 0; border-right: 2px solid var(--encre); border-bottom: 2px solid var(--encre);
  transform: rotate(45deg);
}

.fiche-corps [class$="-badge"] { display: inline-flex; align-items: center; gap: 6px; }
.fiche-corps [class$="-badge"]::before {
  content: ''; width: 14px; height: 14px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fiche-corps [class$="-foot"] { display: flex; flex-wrap: wrap; gap: 21px; align-items: center; }
.fiche-corps [class$="-foot"] span { position: relative; padding-left: 21px; display: inline-flex; align-items: center; }
.fiche-corps [class$="-foot"] span::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; background: var(--encre); opacity: .9;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.fiche-corps [class$="-foot"] span:nth-child(1)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-4.9'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-4.9'/%3E%3C/svg%3E");
}
.fiche-corps [class$="-foot"] span:nth-child(2)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E");
}
.fiche-corps [class$="-foot"] span:nth-child(3)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.4 2'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.4 2'/%3E%3C/svg%3E");
}

.fiche-corps #ez-toc-container { background: var(--creme); border: 1px solid var(--trait); border-radius: var(--r); box-shadow: var(--ombre-douce); padding: 18px 22px; }

/* l auteur en bas d article */
.fiche-pied { padding-top: 40px; }
.auteur { display: grid; grid-template-columns: 88px 1fr; gap: 22px; align-items: start; padding: 26px 30px; background: var(--creme); border-radius: var(--r); }
.auteur-vue { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 4px solid var(--blanc); box-shadow: var(--ombre-douce); }
.auteur-nom { display: block; font-family: var(--titre); font-size: var(--t5); font-weight: 700; }
.auteur-role { display: block; font-size: var(--t2); font-weight: 700; color: var(--ambre2); margin: 2px 0 10px; }
.auteur p { margin: 0; color: var(--encre2); font-size: var(--t3); }

/* le meme circuit : trois articles de la meme rubrique */
.meme-circuit { max-width: 860px; padding-top: 60px; padding-bottom: 80px; }
.meme-circuit-h, .releve h1, .nomenclature h2 { font-family: var(--texte); font-size: var(--t3); font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.meme-circuit-liste { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; }
.branche { display: block; padding: 14px; background: var(--creme); border-radius: var(--r); transition: transform .3s var(--mouvement), box-shadow .3s ease; }
.branche:hover { transform: translateY(-3px); box-shadow: var(--ombre-douce); }
.branche-vue img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); margin-bottom: 12px; }
.branche h3 { font-size: var(--t4); line-height: 1.25; margin-bottom: 6px; }
.branche-note { font-size: var(--t1); color: var(--gris); }

/* =========================================================
   ZONE (rubrique)
   ========================================================= */
.zone-tete { position: relative; min-height: 380px; display: flex; align-items: flex-end; overflow: hidden; border-radius: var(--r); margin-top: 22px; box-shadow: var(--ombre); }
.zone-vue { position: absolute; inset: 0; background-size: cover; background-position: center; }
.zone-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 31, 26, .2) 0%, rgba(42, 31, 26, .82) 100%); }
.zone-mot { position: relative; padding: 48px; color: var(--creme); max-width: 720px; }
.zone-h { font-size: var(--t9); letter-spacing: -.02em; color: var(--creme); }
.zone-compte { display: block; margin: 10px 0 12px; font-size: var(--t2); font-weight: 700; color: var(--ambre); }
.zone-desc { color: var(--creme) !important; font-size: var(--t3); }
.zone-desc p { color: var(--creme) !important; margin: 0; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.zone-liste { padding-top: 40px; margin-bottom: 60px; }

.zone-seo { max-width: 860px; padding-top: 20px; padding-bottom: 90px; color: var(--encre2); }
.zone-seo h2 { font-size: var(--t7); margin-bottom: 14px; color: var(--encre); }

/* =========================================================
   FEUILLET (pages)
   ========================================================= */
.feuillet { max-width: 860px; padding-top: 22px; padding-bottom: 90px; }
.feuillet-tete h1 { font-size: var(--t9); letter-spacing: -.02em; margin: 6px 0 30px; }
.feuillet-corps { font-size: var(--t4); line-height: 1.7; color: var(--encre2); }
.feuillet-corps h2 { font-size: var(--t6); color: var(--encre); margin: 1.8em 0 .5em; }
.feuillet-corps a { color: var(--encre); text-decoration: underline; text-decoration-color: var(--ambre); text-decoration-thickness: 2px; }

/* contact */
.boite { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: start; }
.boite-mot h2 { font-size: var(--t6); margin-bottom: 10px; }
.boite-mot p { color: var(--encre2); font-size: var(--t3); max-width: 46ch; }
.boite-mot a { color: var(--encre); text-decoration: underline; text-decoration-color: var(--ambre); text-decoration-thickness: 2px; }
.boite-bloc { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--trait); }

.bornier { padding: 32px; background: var(--blanc); border-radius: var(--r); box-shadow: var(--ombre); }
.bornier .wpcf7-form p { display: flex; flex-direction: column; gap: 7px; margin: 0 0 16px; }
.bornier .wpcf7-form br { display: none; }
.bornier input[type="text"], .bornier input[type="email"], .bornier textarea {
  width: 100%; padding: 13px 16px;
  background: var(--creme); border: 1px solid var(--trait); border-radius: var(--r);
  font-family: var(--texte); font-size: var(--t3); color: var(--encre);
}
.bornier input::placeholder, .bornier textarea::placeholder { color: var(--gris); }
.bornier input:focus, .bornier textarea:focus { outline: 3px solid rgba(217, 130, 43, .4); outline-offset: 0; border-color: var(--ambre); }
.bornier textarea { min-height: 168px; resize: vertical; }
.bornier input.wpcf7-submit {
  width: 100%; padding: 16px 24px;
  background: var(--encre); border: 0; border-radius: var(--pilule);
  font-family: var(--texte); font-size: var(--t3); font-weight: 700;
  color: var(--creme); cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.bornier input.wpcf7-submit:hover { background: var(--ambre); color: var(--encre); }
.bornier .wpcf7-not-valid-tip { color: var(--ambre2); font-size: var(--t1); }
.bornier .wpcf7-response-output { margin: 14px 0 0 !important; padding: 12px 15px !important; border-radius: var(--r); font-size: var(--t2); }

/* plan du site */
.nomenclature { margin-bottom: 34px; }
.nomenclature h2 a:hover { color: var(--ambre2); }
.nomenclature-liste { list-style: none; margin: 0; padding: 0; }
.nomenclature-liste li { padding: 10px 0; border-bottom: 1px solid var(--trait); }
.nomenclature-liste a { font-weight: 600; }
.nomenclature-liste a:hover { color: var(--ambre2); }

/* 404 */
.hors-plan { max-width: 720px; text-align: center; padding-top: 60px; padding-bottom: 40px; }
.hors-plan h1 { font-size: var(--t9); letter-spacing: -.02em; margin-bottom: 18px; }
.hors-plan p { color: var(--encre2); font-size: var(--t5); }
.hors-plan-actes { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.appel-ligne { display: inline-flex; align-items: center; padding: 14px 26px; border: 1.5px solid var(--encre); border-radius: var(--pilule); font-size: var(--t3); font-weight: 700; transition: background .2s ease, color .2s ease; }
.appel-ligne:hover { background: var(--encre); color: var(--creme); }
.hors-plan-pieces { margin-top: 30px; margin-bottom: 90px; justify-content: center; }

/* recherche */
.releve { padding-top: 22px; padding-bottom: 90px; }
.releve h1 { font-family: var(--titre); font-size: var(--t8); font-weight: 700; color: var(--encre); text-transform: none; letter-spacing: -.02em; margin: 6px 0 24px; }

/* =========================================================
   REVELATIONS
   ========================================================= */
.monte { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--mouvement), transform .6s var(--mouvement); }
.monte.est-monte { opacity: 1; transform: none; }

/* =========================================================
   TABLETTE
   ========================================================= */
@media (max-width: 1024px) {
  .soiree { height: 520px; }
  .boite { grid-template-columns: 1fr; gap: 40px; }
  .meme-circuit-liste { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 768px) {
  .linteau { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--creme); }
  .linteau-rang { height: 64px; }
  .bouton-menu { display: flex; }
  .circuit {
    position: fixed; inset: 0; z-index: 200;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px;
    background: var(--creme); font-family: var(--titre); font-size: var(--t7); font-weight: 700; color: var(--encre);
    transform: translateY(-100%); opacity: 0; visibility: hidden;
    transition: transform .4s var(--mouvement), opacity .3s ease, visibility 0s .4s;
  }
  .circuit.est-branche { transform: none; opacity: 1; visibility: visible; transition: transform .4s var(--mouvement), opacity .3s ease; }
  .circuit a, .single .circuit a, .category .circuit a { color: var(--encre) !important; }
  .circuit-contact { border: 0; padding: 0; color: var(--ambre2) !important; }
  .circuit-fermer { display: block; position: absolute; top: 12px; right: 16px; width: 44px; height: 44px; border: 0; background: transparent; font-size: 36px; line-height: 1; color: var(--encre); cursor: pointer; }

  .soiree { height: auto; }
  .soiree-vue { position: relative; height: 300px; }
  .cartouche { position: relative; bottom: auto; width: calc(100% - 24px); margin-left: 12px; margin-top: -60px; padding: 26px 22px 28px; }
  .cartouche-h em { font-size: var(--t5); }
  .pieces { margin-top: 40px; margin-bottom: 50px; gap: 8px; }
  .piece { font-size: var(--t3); padding: 8px 14px; }

  .mosaique { grid-template-columns: 1fr; gap: 20px; margin-bottom: 70px; }
  .tuile, .tuile-grande, .tuile:nth-child(n) { grid-column: auto; grid-row: auto; }
  .tuile:nth-child(n) .tuile-vue img, .tuile-grande .tuile-vue img { aspect-ratio: 16 / 10; height: auto; }
  .tuile-grande .tuile-h { font-size: var(--t6); }

  .redaction { padding: 90px 22px 30px; margin-top: 80px; margin-bottom: 70px; }
  .redaction-portrait { left: 22px; top: -50px; width: 120px; height: 120px; }

  .fiche-h { font-size: var(--t8); }
  .fiche-corps { padding-top: 28px; }
  .meme-circuit-liste { grid-template-columns: 1fr; }
  .auteur { grid-template-columns: 64px 1fr; gap: 16px; padding: 20px; }
  .auteur-vue { width: 64px; height: 64px; }

  .zone-tete { min-height: 300px; }
  .zone-mot { padding: 28px 22px; }
  .bornier { padding: 22px; }
  .semelle-l2 { grid-template-columns: 1fr; gap: 20px; }
}

/* =========================================================
   MOUVEMENT REDUIT
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .monte { opacity: 1; transform: none; }
}

/* Bouton Boutique mis en avant dans le menu (ajout 14/09/2026) */
.circuit a.circuit-boutique { background: var(--ambre2); color: var(--creme); border: 1.5px solid var(--ambre2); border-radius: var(--pilule); padding: 8px 18px; transition: background .2s ease, border-color .2s ease; }
.circuit a.circuit-boutique:hover { background: var(--encre); border-color: var(--encre); color: var(--creme) !important; }
@media (max-width: 768px) {
  .circuit a.circuit-boutique, .single .circuit a.circuit-boutique, .category .circuit a.circuit-boutique { color: var(--creme) !important; padding: 6px 26px; }
}

/* Bloc categories de la boutique (ajout 14/09/2026) */
.rayons { margin: 8px 0 34px; }
.rayons-h { font-family: var(--titre); font-size: var(--t6); color: var(--encre); margin: 0 0 16px; }
.rayons-tous { margin-top: 10px; }
.rayons-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.rayons-liste li { margin: 0; }
.rayons-liste a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 20px; background: var(--blanc); border: 1px solid var(--trait); border-left: 4px solid var(--ambre); border-radius: 10px; color: var(--encre); transition: border-color .2s ease, box-shadow .2s ease; }
.rayons-liste a:hover { border-color: var(--ambre2); box-shadow: 0 6px 18px rgba(42,31,26,.08); }
.rayons-nom { font-family: var(--titre); font-size: var(--t4); font-weight: 700; line-height: 1.25; }
.rayons-nb { font-size: var(--t1); font-weight: 700; color: var(--ambre2); text-transform: uppercase; letter-spacing: .05em; }
.rayons-x { font-size: var(--t2); color: var(--encre2); line-height: 1.5; }
.rayons-liste a, .rayons-liste a span { text-decoration: none; }