/* ============================================================
   PAGE GUIDANCES — les quatre sections (maquette du 26/09/2026)
   ------------------------------------------------------------
   Chargee sur la seule page guidances (functions.php). L en-tete
   et le bandeau restent dans style.css, sans changement.

   Aucune de ces regles ne s active sans le marqueur .guidances-v2,
   pose sur les quatre sections du nouveau contenu.

   Trois teintes : l ivoire chaud, le bleu nuit, le cuivre. Le
   cuivre des traits, #9E653D, ne sert pas au texte ; surtitres,
   prix et lien prennent --or-action #96683A (4,6:1 sur l ivoire),
   ou #8A5A34 pour le lien du cadre, pose sur la brume.
   ============================================================ */

body.edr-guidances{
  --g-ivoire:#f9f6f0;--g-papier:#f3ede3;
  --g-cuivre:#9E653D;--g-cuivre-trait:rgba(158,101,61,.45);--g-cuivre-texte:#8A5A34;
  --g-cuivre-nuit:#D29D68;--g-encre:#554e47;--g-bouton:#9A6A40;--g-bouton-survol:#83582F}

/* ---- Une seule grille ----
   Celle de l en-tete, commune a tout le site (.wrap : 76rem et son
   rembourrage) : le H1 du bandeau et chaque section s y alignent.
   L en-tete lui-meme est regle pour toutes les pages interieures
   dans style.css. */
body.edr-guidances .guidances-hero__texte{
  padding-top:4rem;padding-bottom:4rem;
  padding-left:calc(max(0px,(100vw - 76rem) / 2) + clamp(1.25rem,5vw,3.5rem))}

/* ---- Commun aux quatre sections ---- */
body.edr-guidances .guidances-page .entry > .bande.guidances-v2{border-top:0;isolation:isolate}
body.edr-guidances .guidances-v2 .eyebrow{color:var(--g-cuivre-texte)}
body.edr-guidances .guidances-v2 .eyebrow::before{background:var(--g-cuivre)}
body.edr-guidances .guidances-v2 h2{margin:0;font-size:clamp(2.3rem,3.6vw,3.25rem);line-height:1.08;text-wrap:balance}
body.edr-guidances .guidances-v2 .eyebrow + h2{margin-top:1rem}
body.edr-guidances .guidances-v2 h2 + p{margin-top:1.75rem}
body.edr-guidances .guidances-v2 p{text-wrap:pretty}

/* ------------------------------------------------------------
   POURQUOI DEMANDER UNE GUIDANCE ?
   Deux rameaux aux bords, la citation posee sur un papier plus
   soutenu, sans cadre, avec la brume en filigrane dans le bas.
   ------------------------------------------------------------ */
body.edr-guidances .guidances-page .entry > .guidances-pourquoi{
  padding-block:clamp(4rem,5.4vw,4.75rem);
  /* le papier aquarelle, ramene vers l ivoire de la maquette par un voile */
  background:
    linear-gradient(rgba(249,246,240,.5),rgba(249,246,240,.5)),
    url("assets/images/guidances-papier-aquarelle-1200.webp") center / cover no-repeat,
    var(--g-ivoire)}
body.edr-guidances .guidances-pourquoi::before{
  content:"";position:absolute;z-index:1;left:-6.2rem;top:-.5rem;height:calc(100% + 1rem);aspect-ratio:440/1074;
  pointer-events:none;opacity:.88;
  background:url("assets/images/guidances-branche-sepia-440.webp") left center / contain no-repeat}
body.edr-guidances .guidances-pourquoi::after{
  content:"";position:absolute;z-index:1;right:-1.4rem;bottom:-1.2rem;height:62%;aspect-ratio:300/660;
  pointer-events:none;opacity:.9;
  background:url("assets/images/guidances-fleurs-sechees-300.webp") right bottom / contain no-repeat}
body.edr-guidances .guidances-pourquoi__grille{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,36rem);
  column-gap:clamp(3rem,6vw,5.5rem);align-items:center}
body.edr-guidances .guidances-pourquoi__texte{padding-left:0}
body.edr-guidances .guidances-pourquoi h2{font-size:clamp(2.2rem,3.3vw,2.95rem)}
body.edr-guidances .guidances-pourquoi__texte p:not(.eyebrow){
  max-width:30.5rem;font-size:.98rem;line-height:1.85;color:var(--g-encre)}
body.edr-guidances .guidances-pourquoi__texte p + p{margin-top:1.1rem}

body.edr-guidances .guidances-citation{
  position:relative;z-index:2;overflow:hidden;margin:0;padding:3rem 4rem 3.6rem 3.9rem;
  background:rgba(241,234,223,.72);box-shadow:0 0 1.6rem .3rem rgba(241,234,223,.5)}
body.edr-guidances .guidances-citation::before{
  content:"“";display:block;height:2.2rem;margin:0 0 1rem -.1rem;
  font-family:Georgia,"Times New Roman",serif;font-size:4.1rem;line-height:.9;color:#A5764F;
  transition:color .3s var(--ease)}
body.edr-guidances .guidances-citation::after{
  content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:48%;pointer-events:none;opacity:.3;
  background:url("assets/images/guidances-brume-sepia-960.webp") center 78% / cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 62%);mask-image:linear-gradient(180deg,transparent 0,#000 62%)}
body.edr-guidances .guidances-citation p{
  max-width:20.5rem;font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,1.5vw,1.36rem);
  line-height:1.66;color:#3b332c}
body.edr-guidances .guidances-citation p + p{margin-top:0}
/* 4,6rem ramenes a 3,3 par l echelle : le survol l allonge sans rien deplacer */
body.edr-guidances .guidances-citation p:last-child::after{
  content:"";display:block;width:4.6rem;height:1px;margin-top:1.9rem;background:var(--g-cuivre);
  transform:scaleX(.717);transform-origin:left;transition:transform .35s var(--ease)}

/* ------------------------------------------------------------
   MA FACON DE LIRE LES RUNES
   La photographie en ligne, inchangee, calee a droite a la
   hauteur de la bande : la bougie et les pierres restent en
   vue, la gauche se fond dans le bleu nuit. Le titre et le
   texte a gauche, un filet, puis les trois reperes.
   ------------------------------------------------------------ */
body.edr-guidances .guidances-page .entry > .guidances-pratique{
  padding-block:clamp(4.25rem,6vw,5.25rem);
  background:
    linear-gradient(180deg,rgba(16,21,28,.42) 0,transparent 20%,transparent 80%,rgba(16,21,28,.5) 100%),
    linear-gradient(90deg,#10151c 0,#10151c 37%,rgba(16,21,28,.84) 47%,rgba(16,21,28,.4) 61%,rgba(16,21,28,.1) 78%,rgba(16,21,28,0) 100%),
    url("assets/images/guidances-pratique-1448.webp") right 36% / auto 124% no-repeat,
    #10151c;
  background:
    linear-gradient(180deg,rgba(16,21,28,.42) 0,transparent 20%,transparent 80%,rgba(16,21,28,.5) 100%),
    linear-gradient(90deg,#10151c 0,#10151c 37%,rgba(16,21,28,.84) 47%,rgba(16,21,28,.4) 61%,rgba(16,21,28,.1) 78%,rgba(16,21,28,0) 100%),
    image-set(url("assets/images/guidances-pratique-1448.avif") type("image/avif"),url("assets/images/guidances-pratique-1448.webp") type("image/webp")) right 36% / auto 124% no-repeat,
    #10151c}
body.edr-guidances .guidances-pratique__grille{
  display:grid;grid-template-columns:minmax(0,29.5rem) minmax(0,19.5rem) 1fr;align-items:center}
body.edr-guidances .guidances-pratique__texte{padding-right:clamp(1.75rem,2.6vw,2.5rem)}
body.edr-guidances .guidances-pratique .eyebrow{color:var(--or2)}
body.edr-guidances .guidances-pratique .eyebrow::before{background:var(--or2)}
/* « Ma facon de lire / les runes », comme sur la maquette */
body.edr-guidances .guidances-pratique h2{max-width:6.6em;color:#fff;text-wrap:wrap}
body.edr-guidances .guidances-pratique__texte p:not(.eyebrow){
  max-width:29rem;font-size:.95rem;line-height:1.8;color:rgba(255,252,247,.86)}
body.edr-guidances .guidances-pratique__texte p + p{margin-top:1.3rem}

/* --picto : cote du pictogramme ; --pas : ecart entre deux reperes.
   Le rail en decoule : chaque repere porte le troncon qui le relie au
   suivant, du bas de son pictogramme au haut du suivant. */
body.edr-guidances .guidances-reperes{
  --picto:2.5rem;--pas:2.3rem;
  display:grid;gap:var(--pas);margin:0;padding:.4rem 0 .4rem clamp(1.75rem,2.4vw,2.25rem);list-style:none;
  border-left:1px solid rgba(210,157,104,.42)}
body.edr-guidances .guidances-repere{
  position:relative;display:grid;grid-template-columns:var(--picto) minmax(0,1fr);column-gap:1.3rem;margin:0;padding:0}
body.edr-guidances .guidances-repere + .guidances-repere{margin-top:0}
body.edr-guidances .guidances-repere::before{
  content:"";position:relative;z-index:1;grid-row:1 / 3;width:var(--picto);height:var(--picto);margin-top:-.1rem;
  background:center / contain no-repeat;transition:filter .32s var(--ease)}
/* Le troncon de rail : un fond tres discret et deux lumieres, l une
   qui descend du pictogramme, l autre qui remonte vers le suivant. Au
   survol, seule leur hauteur (background-size) change. */
body.edr-guidances .guidances-repere::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:calc(var(--picto) / 2 - .5px);top:calc(var(--picto) + .35rem);width:1px;
  height:calc(100% + var(--pas) - var(--picto) - .7rem);
  background:
    linear-gradient(180deg,#E2B27C,rgba(226,178,124,.25)) top / 100% 0 no-repeat,
    linear-gradient(0deg,#E2B27C,rgba(226,178,124,.25)) bottom / 100% 0 no-repeat,
    rgba(210,157,104,.24);
  transition:background-size .34s var(--ease)}
body.edr-guidances .guidances-repere:last-child::after{display:none}
/* le halo du pictogramme, sous lui */
body.edr-guidances .guidances-repere b::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:calc(var(--picto) / 2 - 2.4rem);top:calc(var(--picto) / 2 - .1rem - 2.4rem);width:4.8rem;height:4.8rem;
  border-radius:50%;opacity:0;transition:opacity .34s var(--ease);
  background:radial-gradient(circle,rgba(226,170,110,.3) 0,rgba(226,170,110,.1) 42%,rgba(226,170,110,0) 70%)}
/* une lueur tres diffuse dans la photographie, derriere l etape */
body.edr-guidances .guidances-repere span::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;inset:-1.5rem -2.5rem -1.5rem -3.5rem;
  opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(62% 72% at 20% 45%,rgba(214,160,108,.12),rgba(214,160,108,0) 75%)}
body.edr-guidances .guidances-repere--ecouter::before{background-image:url("assets/images/guidances-icone-oreille.svg")}
body.edr-guidances .guidances-repere--runes::before{background-image:url("assets/images/guidances-icone-embleme-128.webp")}
body.edr-guidances .guidances-repere--eclairer::before{background-image:url("assets/images/guidances-icone-rameau-128.webp")}
body.edr-guidances .guidances-repere b{
  font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;line-height:1.5;color:var(--g-cuivre-nuit);
  transition:color .3s var(--ease)}
body.edr-guidances .guidances-repere span{
  margin-top:.4rem;font-size:.88rem;line-height:1.65;color:rgba(255,252,247,.8);transition:color .3s var(--ease)}
/* l apparition, une seule fois : les trois reperes a 100 ms d ecart */
:where(.js-animations-ready) body.edr-guidances .guidances-repere.rv.rv-pending:nth-child(1){transition-delay:.08s}
:where(.js-animations-ready) body.edr-guidances .guidances-repere.rv.rv-pending:nth-child(2){transition-delay:.18s}
:where(.js-animations-ready) body.edr-guidances .guidances-repere.rv.rv-pending:nth-child(3){transition-delay:.28s}

/* ------------------------------------------------------------
   CHOISIR LA FORMULE
   La seule zone de reservation de la page. Photographies en
   bandeau, serties dans la carte ; intitule, filet et prix
   cuivres ; un bouton au contour cuivre, qui se remplit au survol.
   ------------------------------------------------------------ */
body.edr-guidances .guidances-page .entry > .guidances-formules{
  padding-block:clamp(4rem,5.6vw,4.75rem) clamp(3.5rem,5vw,4.5rem);background:var(--g-ivoire)}
body.edr-guidances .guidances-formules__tete{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:3rem;align-items:end;
  margin-bottom:clamp(2rem,3vw,2.5rem)}
body.edr-guidances .guidances-formules__tete > p{
  max-width:34rem;padding-bottom:.5rem;font-size:.98rem;line-height:1.75;color:var(--g-encre)}

body.edr-guidances .guidances-formules__liste{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.8vw,1.55rem);align-items:stretch}
body.edr-guidances .guidances-formule{
  display:flex;flex-direction:column;padding:.6rem .6rem clamp(1.4rem,2vw,1.85rem);
  background:rgba(252,250,246,.94);border:1px solid #e9e0d3;border-radius:3px;
  box-shadow:0 22px 44px -40px rgba(70,46,24,.45);
  /* l opacite reprend la revelation de .rv, sans son delai : le survol
     de la deuxieme et de la troisieme carte ne doit pas attendre */
  transition:opacity .52s var(--ease),transform .32s var(--ease),border-color .32s var(--ease),box-shadow .38s var(--ease);
  transition-delay:0s}
/* La photographie dans son cadre, qui masque le leger zoom du survol.
   Elle y est posee en absolu : elle ne participe jamais au calcul des
   hauteurs. C est aussi ce qui la protege de la reserve 3000 x 1500 px
   que WordPress donne aux images « sizes=auto » (contain:size), qui la
   faisait monter a 1 500 px a 768 ; contain-intrinsic-size reste en
   garde-fou, aux proportions des attributs width et height. */
body.edr-guidances .guidances-formule__visuel{position:relative;overflow:hidden;border-radius:2px;aspect-ratio:5/2}
body.edr-guidances .entry .guidances-formule__image{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0;
  contain-intrinsic-size:800px 600px;transition:transform .6s var(--ease)}
body.edr-guidances .guidances-formule--30 .guidances-formule__image{object-position:40% 52%}
body.edr-guidances .guidances-formule--60 .guidances-formule__image{object-position:60% 60%}
body.edr-guidances .guidances-formule--etude .guidances-formule__image{object-position:50% 50%}
body.edr-guidances .guidances-formule__corps{
  display:flex;flex-direction:column;flex:1;padding:clamp(1.4rem,2vw,1.85rem) clamp(1rem,1.6vw,1.45rem) 0}
body.edr-guidances .guidances-formule h3{margin:0;font-size:clamp(1.42rem,1.8vw,1.62rem);line-height:1.15;color:var(--nuit)}
/* 3,4rem ramenes a 2,2 par l echelle : le survol l allonge sans rien deplacer */
body.edr-guidances .guidances-formule h3::after{
  content:"";display:block;width:3.4rem;height:1px;margin-top:1rem;background:var(--g-cuivre);
  transform:scaleX(.647);transform-origin:left;transition:transform .36s var(--ease)}
body.edr-guidances .guidances-formule .guidances-formule__prix{
  margin-top:.75rem;font-family:var(--serif);font-size:1.72rem;line-height:1;color:var(--or-action);
  transition:color .3s var(--ease)}
body.edr-guidances .guidances-formule__corps > p:not(.guidances-formule__prix){
  flex:1;margin-top:.85rem;font-size:.94rem;line-height:1.75;color:#5f574f}
/* Au repos, un contour cuivre (#7A4B23 sur l ivoire : 7,2:1) ; plein au
   survol de la carte ou au focus, texte ivoire (4,9:1 sur #9A6A40). */
body.edr-guidances .entry .guidances-formule__bouton{
  width:100%;min-height:2.95rem;margin-top:1.5rem;padding:calc(.75rem - 1px) 1.2rem;
  font-size:.84rem;letter-spacing:.03em;color:#7A4B23;background:transparent;
  border:1px solid rgba(154,106,64,.6);box-shadow:none;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
body.edr-guidances .guidances-v2 .btn:focus-visible{outline:2px solid var(--g-cuivre);outline-offset:3px}

/* ------------------------------------------------------------
   LE CADRE
   L ivoire derriere les textes, la brume des montagnes dans le
   tiers bas. Deux colonnes sur la grille de la page, separees par
   un filet vertical a la hauteur des contenus. Dessous, hors des
   deux colonnes, un aparte vers le contact entre deux filets.
   Aucun bouton.
   ------------------------------------------------------------ */
body.edr-guidances .guidances-page .entry > .guidances-cadre{
  padding-block:clamp(3.25rem,4.6vw,4rem) clamp(8.75rem,11.5vw,10.5rem);background:var(--g-ivoire)}
body.edr-guidances .guidances-cadre::before{
  content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:37%;pointer-events:none;
  background:url("assets/images/guidances-brume-sepia-1672.webp") center 74% / cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.45) 30%,#000 62%);
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.45) 30%,#000 62%)}
body.edr-guidances .guidances-cadre__grille{
  display:grid;grid-template-columns:minmax(0,5fr) 1px minmax(0,7fr);
  column-gap:clamp(2.5rem,5.5vw,5rem);align-items:start}
/* le filet vertical, a la hauteur des deux colonnes */
body.edr-guidances .guidances-cadre__grille::before{
  content:"";grid-column:2;grid-row:1;align-self:stretch;background:rgba(138,90,52,.42)}
body.edr-guidances .guidances-cadre__titre{grid-column:1;grid-row:1}
body.edr-guidances .guidances-cadre__texte{grid-column:3;grid-row:1}
body.edr-guidances .guidances-cadre h2{max-width:11em;font-size:clamp(2.2rem,3.1vw,2.85rem)}
body.edr-guidances .guidances-cadre__texte p{max-width:34rem;font-size:.96rem;line-height:1.8;color:#4f4841}
body.edr-guidances .guidances-cadre__texte p + p{margin-top:1.05rem}
/* L aparte : une porte de contact secondaire, centree sous les deux
   colonnes, entre deux filets. Ceux-ci mesurent 4,4rem, ramenes a 3,2
   par l echelle : au survol ils s allongent vers l exterieur sans
   deplacer le texte. */
body.edr-guidances .guidances-cadre__question{
  display:flex;align-items:center;justify-content:center;gap:1.4rem;max-width:none;
  margin:clamp(2.75rem,4.5vw,3.5rem) 0 0;text-align:center}
body.edr-guidances .guidances-cadre__question::before,
body.edr-guidances .guidances-cadre__question::after{
  content:"";flex:0 0 4.4rem;height:1px;background:rgba(138,90,52,.5);
  transform:scaleX(.727);transition:transform .38s var(--ease)}
body.edr-guidances .guidances-cadre__question::before{transform-origin:right}
body.edr-guidances .guidances-cadre__question::after{transform-origin:left}
body.edr-guidances .guidances-cadre__aparte{
  font-family:var(--serif);font-style:italic;font-size:1.22rem;line-height:1.4;color:#5a5048}
body.edr-guidances .entry .guidances-cadre__question a{
  margin-left:.3rem;font-style:normal;font-weight:500;color:#8E5A2E;white-space:nowrap;
  border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;
  text-decoration-color:rgba(142,90,46,.45);transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
/* en inline-block, la fleche echappe au soulignement du lien */
body.edr-guidances .guidances-cadre__question .fl{display:inline-block;margin-left:.5rem}

/* ------------------------------------------------------------
   PALIERS
   ------------------------------------------------------------ */
@media(max-width:1240px){
  /* le rameau de gauche ne tient plus dans la marge : il s efface */
  body.edr-guidances .guidances-pourquoi::before{display:none}
  body.edr-guidances .guidances-pourquoi__texte{padding-left:0}
}

@media(max-width:1100px){
  body.edr-guidances .guidances-hero__texte{padding-top:3.25rem;padding-bottom:3.25rem}
  body.edr-guidances .guidances-pourquoi__grille{grid-template-columns:minmax(0,1fr) minmax(0,31rem)}
  body.edr-guidances .guidances-citation{padding:2.6rem 3rem 3rem}
  body.edr-guidances .guidances-pratique__grille{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}

@media(max-width:899.98px){
  body.edr-guidances .guidances-hero__texte{padding-top:3rem;padding-bottom:3rem;
    padding-right:clamp(1.25rem,5vw,3.5rem)}
  body.edr-guidances .guidances-pourquoi__grille{grid-template-columns:1fr;row-gap:2.5rem}
  body.edr-guidances .guidances-citation{max-width:36rem}
  body.edr-guidances .guidances-pourquoi::after{height:15rem;opacity:.6}

  body.edr-guidances .guidances-page .entry > .guidances-pratique{
    background:
      linear-gradient(180deg,#10151c 0,rgba(16,21,28,.93) 45%,rgba(16,21,28,.78) 100%),
      url("assets/images/guidances-pratique-900.webp") 66% 100% / cover no-repeat,
      #10151c;
    background:
      linear-gradient(180deg,#10151c 0,rgba(16,21,28,.93) 45%,rgba(16,21,28,.78) 100%),
      image-set(url("assets/images/guidances-pratique-900.avif") type("image/avif"),url("assets/images/guidances-pratique-900.webp") type("image/webp")) 66% 100% / cover no-repeat,
      #10151c}
  body.edr-guidances .guidances-pratique__grille{grid-template-columns:1fr;row-gap:2.6rem}
  body.edr-guidances .guidances-pratique__texte{padding-right:0}
  body.edr-guidances .guidances-reperes{
    --pas:1.7rem;max-width:34rem;padding:2.2rem 0 0;border-left:0;border-top:1px solid rgba(210,157,104,.42)}

  body.edr-guidances .guidances-formules__tete{grid-template-columns:1fr;row-gap:1.3rem}
  body.edr-guidances .guidances-formules__tete > p{padding-bottom:0}
  /* une carte par ligne, la photographie a gauche */
  body.edr-guidances .guidances-formules__liste{grid-template-columns:1fr;gap:1.1rem}
  body.edr-guidances .guidances-formule{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);padding:.6rem}
  /* le cadre de la photo s etire sur la hauteur de la carte ; la photo,
     en absolu, ne la dicte jamais */
  body.edr-guidances .guidances-formule__visuel{aspect-ratio:auto}
  body.edr-guidances .guidances-formule__corps{padding:1.1rem .9rem .9rem 1.5rem}
  body.edr-guidances .entry .guidances-formule__bouton{width:auto;align-self:flex-start;padding-inline:1.6rem}

  body.edr-guidances .guidances-page .entry > .guidances-cadre{padding-bottom:9.5rem}
  /* une colonne ; le filet vertical passe a l horizontale, entre les deux */
  body.edr-guidances .guidances-cadre__grille{grid-template-columns:1fr;row-gap:1.75rem}
  body.edr-guidances .guidances-cadre__grille::before{
    grid-column:1;grid-row:2;width:3rem;height:1px;background:rgba(138,90,52,.5)}
  body.edr-guidances .guidances-cadre__titre{grid-row:1}
  body.edr-guidances .guidances-cadre__texte{grid-column:1;grid-row:3}
  body.edr-guidances .guidances-page .entry > .guidances-cadre{padding-top:3.75rem}
  /* le texte passe sur une colonne et descend : le paysage reste
     dessous, dans la seule bande du rembourrage bas */
  body.edr-guidances .guidances-cadre::before{
    height:10.5rem;background-position:20% bottom;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 32%,#000 58%);
    mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 32%,#000 58%)}
}

@media(max-width:599.98px){
  body.edr-guidances .guidances-hero__texte{padding-top:2.5rem;padding-bottom:2.25rem}
  body.edr-guidances .guidances-v2 h2{font-size:2.15rem}
  body.edr-guidances .guidances-page .entry > .guidances-pourquoi,
  body.edr-guidances .guidances-page .entry > .guidances-pratique{padding-block:3.6rem}
  body.edr-guidances .guidances-page .entry > .guidances-formules{padding-top:3.6rem}
  /* rien ne passe derriere le texte sur telephone */
  body.edr-guidances .guidances-pourquoi::after{display:none}
  body.edr-guidances .guidances-citation{padding:2.1rem 1.6rem 2.4rem}
  body.edr-guidances .guidances-citation::before{font-size:3.8rem;height:1.9rem;margin-bottom:.8rem}
  body.edr-guidances .guidances-citation p{font-size:1.18rem}

  body.edr-guidances .guidances-pratique__texte p:not(.eyebrow){font-size:.97rem;line-height:1.75}
  body.edr-guidances .guidances-reperes{--picto:2.2rem}
  body.edr-guidances .guidances-repere{column-gap:1.1rem}

  /* les cartes s empilent, la photographie en bandeau au-dessus */
  body.edr-guidances .guidances-formule{display:flex}
  body.edr-guidances .guidances-formule__visuel{aspect-ratio:5/2}
  body.edr-guidances .guidances-formule__corps{padding:1.35rem 1rem 0}
  body.edr-guidances .entry .guidances-formule__bouton{width:100%;align-self:stretch;margin-top:1.25rem}
  body.edr-guidances .guidances-formule{padding-bottom:1.1rem}

  body.edr-guidances .guidances-page .entry > .guidances-cadre{padding-bottom:10rem}
  body.edr-guidances .guidances-cadre::before{height:11rem}
  body.edr-guidances .guidances-cadre__question{gap:.9rem}
  body.edr-guidances .guidances-cadre__question::before,
  body.edr-guidances .guidances-cadre__question::after{flex-basis:2.4rem}
  body.edr-guidances .guidances-cadre__aparte{font-size:1.1rem}
}

/* ------------------------------------------------------------
   INTERACTIONS
   Une souris seulement : sur ecran tactile, rien ne depend du
   survol, tout est lisible au repos. Au clavier, les cartes et
   l aparte reagissent au focus. Aucune de ces regles ne touche a
   une dimension : transform, opacity, filter, couleurs et
   background-size seulement, jamais de hauteur.
   ------------------------------------------------------------ */
@media(hover:hover) and (pointer:fine){
  /* Ma pratique : le repere survole s eclaire, et le rail autour de lui */
  body.edr-guidances .guidances-repere:hover::before{
    filter:brightness(1.22) saturate(1.12) drop-shadow(0 0 .4rem rgba(226,170,110,.5))}
  body.edr-guidances .guidances-repere:hover b::before,
  body.edr-guidances .guidances-repere:hover span::before{opacity:1}
  body.edr-guidances .guidances-repere:hover b{color:#EBBE8C}
  body.edr-guidances .guidances-repere:hover span{color:rgba(255,252,247,.95)}
  body.edr-guidances .guidances-repere:hover::after{background-size:100% 50%,100% 0}
  body.edr-guidances .guidances-repere:has(+ .guidances-repere:hover)::after{background-size:100% 0,100% 50%}

  /* Formules */
  body.edr-guidances .guidances-formule:hover{
    transform:translateY(-5px);border-color:rgba(158,101,61,.5);box-shadow:0 30px 52px -36px rgba(120,76,36,.34)}
  body.edr-guidances .guidances-formule:hover .guidances-formule__image{transform:scale(1.03)}

  /* Citation */
  body.edr-guidances .guidances-citation:hover::before{color:#8A5530}
  body.edr-guidances .guidances-citation:hover p:last-child::after{transform:scaleX(1)}

  /* le detail des cartes et de l aparte ; au clavier, voir plus bas */
  body.edr-guidances .guidances-formule:hover h3::after{transform:scaleX(1)}
  body.edr-guidances .guidances-formule:hover .guidances-formule__prix{color:#7E4F24}
  body.edr-guidances .entry .guidances-formule:hover .guidances-formule__bouton{
    color:#fcfaf6;background:var(--g-bouton);border-color:var(--g-bouton)}
  body.edr-guidances .guidances-formule:hover .guidances-formule__bouton .fl{transform:translateX(4px)}
  body.edr-guidances .guidances-cadre__question:hover::before,
  body.edr-guidances .guidances-cadre__question:hover::after{transform:scaleX(1)}
  body.edr-guidances .entry .guidances-cadre__question:hover a{color:#7A4B23;text-decoration-color:#7A4B23}
  body.edr-guidances .guidances-cadre__question:hover .fl{transform:translateX(4px)}
}
/* Au clavier : les memes signes au focus */
body.edr-guidances .guidances-formule:focus-within h3::after{transform:scaleX(1)}
body.edr-guidances .guidances-formule:focus-within .guidances-formule__prix{color:#7E4F24}
body.edr-guidances .entry .guidances-formule .guidances-formule__bouton:focus-visible{
  color:#fcfaf6;background:var(--g-bouton);border-color:var(--g-bouton)}
body.edr-guidances .guidances-formule__bouton:focus-visible .fl{transform:translateX(4px)}
body.edr-guidances .guidances-cadre__question:focus-within::before,
body.edr-guidances .guidances-cadre__question:focus-within::after{transform:scaleX(1)}
body.edr-guidances .entry .guidances-cadre__question a:focus-visible{color:#7A4B23;text-decoration-color:#7A4B23}
body.edr-guidances .guidances-cadre__question a:focus-visible{outline:2px solid var(--g-cuivre);outline-offset:4px}

/* Mouvement reduit : plus aucun deplacement ni zoom ; les changements
   de couleur et de lumiere restent, sans transition. */
@media(prefers-reduced-motion:reduce){
  body.edr-guidances .guidances-formule,
  body.edr-guidances .guidances-formule:hover{transform:none}
  body.edr-guidances .guidances-formule:hover .guidances-formule__image{transform:none}
  body.edr-guidances .guidances-formule .fl,
  body.edr-guidances .guidances-cadre__question .fl{transform:none!important}
  body.edr-guidances .guidances-formule,
  body.edr-guidances .guidances-formule *,
  body.edr-guidances .guidances-formule h3::after,
  body.edr-guidances .guidances-repere,
  body.edr-guidances .guidances-repere::before,
  body.edr-guidances .guidances-repere::after,
  body.edr-guidances .guidances-repere *,
  body.edr-guidances .guidances-repere b::before,
  body.edr-guidances .guidances-repere span::before,
  body.edr-guidances .guidances-citation::before,
  body.edr-guidances .guidances-citation p:last-child::after,
  body.edr-guidances .guidances-cadre__question::before,
  body.edr-guidances .guidances-cadre__question::after,
  body.edr-guidances .guidances-cadre__question a{transition:none}
}