/*
Theme Name: Annik Lauzon
Theme URI: https://crzp.ca
Author: Canis Connexa, Solutions en ligne
Author URI: https://canisconnexa.com
Description: Theme WordPress sur mesure pour Annik Lauzon, accompagnatrice en relation de coeur. Contenu pilote par ACF gratuit, types de contenu pour le repetitif, gabarits d'offre, Yoast comme seule source des balises de meta.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: annik
*/

/* ===========================================================
   1. TOKENS, systeme de marque Annik Lauzon
   =========================================================== */
:root{
  --creme:#FAF6F0;
  --os:#F0E9DE;
  --or:#C9A96E;
  --or-clair:#E8D5B0;
  --fonce:#1C1410;
  --brun:#3D2B1F;
  --rose:#C4756A;
  --rose-clair:#EDD5D0;
  --texte:#2C1F17;
  --sourdine:#7A6558;
  --blanc:#FFFFFF;
  --ligne:rgba(44,31,23,.12);

  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --gouttiere:24px;
  --largeur:1180px;
  --entete-h:84px;
  --ombre:0 2px 18px rgba(44,31,23,.07);
  --ombre-forte:0 22px 52px rgba(44,31,23,.14);
}

/* ===========================================================
   2. BASE
   =========================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--entete-h) + 20px);}
body{
  margin:0;
  background:var(--creme);
  color:var(--texte);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--or);text-decoration:none;}
a:hover{color:var(--rose);}
ul,ol{margin:0;padding:0;}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:300;
  line-height:1.16;
  color:var(--texte);
  margin:0 0 .5em;
}
h1{font-size:clamp(2.3rem,5.6vw,4rem);}
h2{font-size:clamp(1.9rem,4.2vw,3.1rem);}
h3{font-size:1.5rem;}
p{margin:0 0 1.15em;color:var(--sourdine);}
p:last-child{margin-bottom:0;}
strong{color:var(--texte);font-weight:500;}
em{font-style:italic;color:var(--or);}

.contenu{max-width:var(--largeur);margin:0 auto;padding:0 var(--gouttiere);}
.contenu-etroit{max-width:800px;margin:0 auto;padding:0 var(--gouttiere);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
:focus-visible{outline:2px solid var(--or);outline-offset:3px;}
.lien-evitement{position:absolute;left:-9999px;}
.lien-evitement:focus{left:16px;top:16px;z-index:999;background:var(--blanc);padding:12px 18px;}

/* Ornement de marque */
.ornement{color:var(--or);font-family:var(--serif);display:block;text-align:center;font-size:1.4rem;margin-bottom:18px;}

/* Surtitre de section, or majuscules 11px */
.surtitre{
  font-family:var(--sans);font-weight:400;
  font-size:11px;letter-spacing:4px;text-transform:uppercase;
  color:var(--or);margin:0 0 18px;display:block;
}

/* ===========================================================
   3. BOUTONS, rectangulaires majuscules 2.5px
   =========================================================== */
.btn{
  display:inline-block;
  font-family:var(--sans);font-weight:400;
  font-size:13px;letter-spacing:2.5px;text-transform:uppercase;
  padding:19px 44px;border-radius:0;
  border:1px solid var(--or);background:var(--or);color:var(--blanc);
  cursor:pointer;transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.btn:hover{background:var(--brun);border-color:var(--brun);color:var(--creme);}
.btn-contour{background:transparent;color:var(--or);}
.btn-contour:hover{background:var(--or);color:var(--blanc);border-color:var(--or);}
.btn-clair{background:var(--or);border-color:var(--or);color:var(--fonce);}
.btn-clair:hover{background:var(--creme);border-color:var(--creme);color:var(--fonce);}

/* ===========================================================
   4. ENTETE
   =========================================================== */
.entete{position:sticky;top:0;z-index:60;background:var(--creme);border-bottom:1px solid var(--ligne);}
.entete-inner{min-height:var(--entete-h);display:flex;align-items:center;justify-content:space-between;gap:24px;}
.marque{display:flex;align-items:center;gap:13px;}
.marque img{width:46px;height:46px;object-fit:contain;}
.marque-nom{font-family:var(--serif);font-weight:300;font-size:1.45rem;color:var(--or);line-height:1.1;display:block;}
.marque-sous{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--sourdine);line-height:1.4;display:block;}

.entete-droite{display:flex;align-items:center;gap:30px;}
.menu-principal{display:flex;list-style:none;gap:26px;align-items:center;}
.menu-principal a{color:var(--texte);font-size:.95rem;padding:5px 0;border-bottom:1px solid transparent;}
.menu-principal a:hover,.menu-principal .current-menu-item > a{color:var(--or);border-bottom-color:var(--or);}

.entete-contacts{display:flex;align-items:center;gap:20px;font-size:.9rem;}
.entete-contacts a{display:inline-flex;align-items:center;gap:8px;color:var(--texte);}
.entete-contacts a:hover{color:var(--or);}
.entete-contacts svg{width:16px;height:16px;flex:none;}

.reseaux{display:flex;gap:15px;align-items:center;}
.reseaux a{color:var(--texte);display:inline-flex;}
.reseaux a:hover{color:var(--or);}
.reseaux svg{width:18px;height:18px;}

.bascule-menu{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--texte);}
.bascule-menu svg{width:26px;height:26px;}

/* ===========================================================
   5. HERO
   =========================================================== */
.hero{padding:104px 0 112px;background:linear-gradient(165deg,var(--creme) 0%,var(--os) 100%);position:relative;overflow:hidden;}
.hero::before{
  content:'\2726';position:absolute;right:-60px;top:-40px;
  font-family:var(--serif);font-size:420px;line-height:1;
  color:rgba(201,169,110,.05);pointer-events:none;
}
.hero-grille{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;position:relative;}
.hero h1{margin-bottom:.3em;}
.hero-sous{font-family:var(--serif);font-style:italic;font-size:clamp(1.35rem,2.6vw,1.85rem);color:var(--or);margin:0 0 1.1em;line-height:1.35;}
.hero-texte{font-size:1.05rem;max-width:33em;margin-bottom:2.4em;}
.hero-media{overflow:hidden;box-shadow:var(--ombre-forte);}
.hero-media img{width:100%;aspect-ratio:5/4;object-fit:cover;}


/* Repli quand une image n'est pas encore televersee: la grille a deux colonnes
   ne doit pas laisser une colonne vide avec le texte ecrase sur la moitie.
   Bug reel trouve au rendu de test, pas suppose. */
.hero-grille > *:only-child,
.boussole-grille > *:only-child,
.apropos-grille > *:only-child,
.contact-bloc > *:only-child{grid-column:1 / -1;}
.hero-grille > .hero-corps:only-child .hero-texte{max-width:44em;}

/* ===========================================================
   6. SECTIONS
   =========================================================== */
.section{padding:108px 0;}
.section--os{background:var(--os);}
.section--creme{background:var(--creme);}
.section--rose{background:var(--rose-clair);}
.section-titre{text-align:center;margin-bottom:14px;}
.section-intro{text-align:center;max-width:36em;margin:0 auto 60px;font-size:1.05rem;}

/* ===========================================================
   7. BOUSSOLE
   =========================================================== */
.boussole-grille{display:grid;grid-template-columns:.9fr 1.1fr;gap:76px;align-items:center;}
.boussole-media{border-radius:50%;overflow:hidden;box-shadow:var(--ombre-forte);}
.boussole-media img{aspect-ratio:1;object-fit:cover;width:100%;}
.boussole-titre{display:flex;align-items:center;gap:15px;margin-bottom:.35em;}
.boussole-titre svg{width:30px;height:30px;color:var(--or);flex:none;}
.boussole-titre h2{margin:0;}
.boussole-accroche{font-family:var(--serif);font-size:1.35rem;color:var(--texte);margin-bottom:1em;line-height:1.4;}
.boussole-carte{background:var(--blanc);padding:32px 34px;margin:30px 0;box-shadow:var(--ombre);}
.boussole-carte p{color:var(--texte);margin-bottom:1em;}
.boussole-liste{list-style:none;display:grid;gap:13px;}
.boussole-liste li{position:relative;padding-left:24px;color:var(--sourdine);}
.boussole-liste li::before{content:'\2726';position:absolute;left:0;top:-.05em;color:var(--or);font-family:var(--serif);font-size:.9rem;}
.boussole-note{font-family:var(--serif);font-style:italic;font-size:1rem;margin-top:18px;}

/* ===========================================================
   8. A PROPOS
   =========================================================== */
.apropos-grille{display:grid;grid-template-columns:1fr 1.15fr;gap:76px;align-items:center;}
.apropos-media{overflow:hidden;box-shadow:var(--ombre-forte);}
.apropos-media img{aspect-ratio:4/5;object-fit:cover;width:100%;}
.apropos-nom{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--or);margin:-.3em 0 1.1em;}
.apropos-citation{
  border-left:1px solid var(--or);padding:6px 0 6px 28px;margin:34px 0;
  font-family:var(--serif);font-style:italic;font-size:1.25rem;line-height:1.6;
}
.apropos-citation p{color:var(--texte);}

/* ===========================================================
   9. PROGRAMME
   =========================================================== */
.programme-entete{text-align:center;max-width:44em;margin:0 auto 58px;}
.programme-logo{width:84px;height:84px;object-fit:contain;margin:0 auto 26px;}
.programme-sous{font-family:var(--serif);font-style:italic;font-size:1.4rem;color:var(--or);margin-bottom:1em;}
.piliers{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.pilier{background:var(--blanc);padding:38px;box-shadow:var(--ombre);}
.pilier-icone{font-size:1.9rem;line-height:1;display:block;margin-bottom:18px;}
.pilier h3{margin-bottom:.35em;}
.pilier p{margin:0;}
.programme-cta{text-align:center;margin-top:54px;}

/* ===========================================================
   10. TEMOIGNAGES
   =========================================================== */
.temoignages{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.temoignage{background:var(--blanc);padding:38px;box-shadow:var(--ombre);}
.temoignage h3{font-size:1.35rem;margin-bottom:.6em;}
.temoignage-texte{font-family:var(--serif);font-style:italic;font-size:1.1rem;line-height:1.65;margin-bottom:1.2em;}
.temoignage-texte p{color:var(--texte);}
.temoignage-auteur{color:var(--or);font-size:11px;letter-spacing:2px;text-transform:uppercase;margin:0;}

/* ===========================================================
   11. FAQ
   =========================================================== */
.faq{max-width:820px;margin:0 auto;background:var(--blanc);padding:12px 36px;box-shadow:var(--ombre);}
.faq-item{border-bottom:1px solid var(--ligne);}
.faq-item:last-child{border-bottom:0;}
.faq-question{
  width:100%;background:none;border:0;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:28px 0;text-align:left;
  font-family:var(--serif);font-weight:300;font-size:1.3rem;color:var(--texte);
}
.faq-question:hover{color:var(--or);}
.faq-chevron{width:17px;height:17px;flex:none;color:var(--or);transition:transform .3s ease;}
.faq-question[aria-expanded="true"] .faq-chevron{transform:rotate(180deg);}
.faq-reponse{display:none;padding:0 0 28px;}
.faq-reponse[data-ouvert="1"]{display:block;}

/* ===========================================================
   12. CONTACT, degrade radial fonce
   =========================================================== */
.section-contact{padding:0;margin:108px 0;}
.contact-bloc{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;box-shadow:var(--ombre-forte);}
.contact-texte{
  background:radial-gradient(circle at 25% 20%,var(--brun) 0%,var(--fonce) 70%);
  color:var(--creme);padding:72px 58px;position:relative;overflow:hidden;
}
.contact-texte::before{
  content:'\2726';position:absolute;left:-40px;bottom:-90px;
  font-family:var(--serif);font-size:320px;line-height:1;
  color:rgba(201,169,110,.06);pointer-events:none;
}
.contact-texte > *{position:relative;}
.contact-texte h2{color:var(--creme);}
.contact-texte p{color:rgba(250,246,240,.78);}
.contact-coords{list-style:none;display:grid;gap:17px;margin-top:34px;}
.contact-coords a{color:var(--or-clair);display:inline-flex;align-items:center;gap:13px;}
.contact-coords a:hover{color:var(--blanc);}
.contact-coords svg{width:18px;height:18px;flex:none;}
.contact-media img{width:100%;height:100%;object-fit:cover;min-height:440px;}
.contact-formulaire{margin-top:52px;}

/* ===========================================================
   13. PIED DE PAGE
   =========================================================== */
.pied{background:var(--os);padding:84px 0 32px;border-top:1px solid var(--ligne);}
.pied-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:56px;margin-bottom:56px;}
.pied-marque img{width:58px;margin-bottom:18px;}
.pied-nom{font-family:var(--serif);font-size:1.35rem;color:var(--or);}
.pied-sous{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--sourdine);}
.pied h3{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--or);font-family:var(--sans);font-weight:400;margin-bottom:1.6em;}
.pied ul{list-style:none;display:grid;gap:12px;}
.pied a{color:var(--sourdine);}
.pied a:hover{color:var(--or);}
.pied-coords li{display:flex;gap:12px;align-items:flex-start;color:var(--sourdine);font-size:.95rem;}
.pied-coords svg{width:16px;height:16px;flex:none;margin-top:5px;color:var(--or);}
.pied-bas{border-top:1px solid var(--ligne);padding-top:28px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:.88rem;color:var(--sourdine);}

/* ===========================================================
   14. BANDEAU DE TEMOINS
   =========================================================== */
.temoins{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:var(--fonce);color:rgba(250,246,240,.85);
  padding:20px var(--gouttiere);
  display:none;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;
  font-size:.92rem;box-shadow:0 -6px 26px rgba(28,20,16,.24);
}
.temoins.est-visible{display:flex;}
.temoins p{margin:0;color:inherit;max-width:60em;}
.temoins a{color:var(--or-clair);text-decoration:underline;}
.temoins .btn{padding:13px 30px;font-size:11px;}

/* ===========================================================
   15. PAGES INTERNES ET OFFRES
   =========================================================== */
.page-entete{padding:88px 0 0;text-align:center;}
.page-corps{padding:44px 0 100px;}
.page-corps p,.page-corps li{color:var(--sourdine);}
.page-corps h2,.page-corps h3{margin-top:1.6em;}
.page-corps ul,.page-corps ol{padding-left:1.3em;display:grid;gap:9px;margin-bottom:1.5em;}

.offre-hero{
  background:radial-gradient(circle at 50% 0%,var(--brun) 0%,var(--fonce) 68%);
  color:var(--creme);text-align:center;padding:112px 0 108px;
}
.offre-hero h1{color:var(--creme);max-width:16em;margin-left:auto;margin-right:auto;}
.offre-hero .surtitre{color:var(--or);}
.offre-hero p{color:rgba(250,246,240,.75);max-width:34em;margin-left:auto;margin-right:auto;}
.offre-hero .btn{margin-top:34px;}

.liste-articles{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.carte-article{background:var(--blanc);overflow:hidden;box-shadow:var(--ombre);}
.carte-article img{aspect-ratio:16/10;object-fit:cover;width:100%;}
.carte-article-corps{padding:28px;}
.carte-article h3{font-size:1.3rem;}
.pagination{display:flex;gap:10px;justify-content:center;margin-top:48px;}
.pagination .page-numbers{padding:11px 17px;background:var(--blanc);color:var(--texte);box-shadow:var(--ombre);}
.pagination .current{background:var(--or);color:var(--blanc);}


/* ===========================================================
   17. BOUTIQUE, WooCommerce
   =========================================================== */
.entete-boutique{display:flex;align-items:center;gap:18px;}
.lien-boutique{
  font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--texte);border-bottom:1px solid var(--or);padding-bottom:3px;
}
.lien-boutique:hover{color:var(--or);}
.lien-panier{position:relative;display:inline-flex;color:var(--texte);}
.lien-panier:hover{color:var(--or);}
.lien-panier svg{width:21px;height:21px;}
.panier-compte{
  position:absolute;top:-7px;right:-9px;
  min-width:18px;height:18px;padding:0 4px;
  background:var(--or);color:var(--blanc);
  font-size:10px;line-height:18px;text-align:center;border-radius:9px;
  display:none;
}
.panier-compte.est-rempli{display:block;}

.boutique{padding-top:24px;}

/* Grille de produits */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;list-style:none;margin:0;padding:0;}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none;}
.woocommerce ul.products li.product{width:auto !important;margin:0 !important;float:none !important;text-align:center;}
.woocommerce ul.products li.product a img{margin:0 0 20px;box-shadow:var(--ombre);}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--serif);font-weight:300;font-size:1.4rem;color:var(--texte);padding:0;margin:0 0 .3em;
}
.woocommerce ul.products li.product .price{color:var(--or);font-family:var(--sans);font-size:1rem;font-weight:400;display:block;margin-bottom:16px;}
.woocommerce ul.products li.product .price del{color:var(--sourdine);opacity:.6;margin-right:8px;}
.woocommerce span.onsale{
  background:var(--rose);color:var(--blanc);border-radius:0;
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  min-height:auto;min-width:auto;padding:7px 14px;line-height:1;top:14px;left:14px;margin:0;
}

/* Boutons WooCommerce alignes sur le theme */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt{
  background:var(--or);color:var(--blanc);
  font-family:var(--sans);font-weight:400;
  font-size:13px;letter-spacing:2.5px;text-transform:uppercase;
  padding:17px 36px;border-radius:0;border:1px solid var(--or);
  transition:background .3s ease,border-color .3s ease,color .3s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{
  background:var(--brun);border-color:var(--brun);color:var(--creme);
}

/* Fiche produit */
.woocommerce div.product{margin-top:20px;}
.woocommerce div.product .product_title{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4vw,3rem);}
.woocommerce div.product p.price,
.woocommerce div.product span.price{color:var(--or);font-family:var(--serif);font-size:1.9rem;font-weight:300;}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--sourdine);font-size:1.05rem;}
.woocommerce div.product form.cart{margin:32px 0;display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.woocommerce div.product form.cart div.quantity{margin:0;}
.woocommerce .quantity .qty{
  width:78px;padding:15px 10px;text-align:center;
  border:1px solid var(--ligne);background:var(--blanc);
  font-family:var(--sans);font-size:1rem;color:var(--texte);
}
.note-livraison{
  flex-basis:100%;margin:6px 0 0;
  font-family:var(--serif);font-style:italic;color:var(--sourdine);font-size:1rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin-bottom:0;}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border-bottom-color:var(--ligne);}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent;border:0;border-radius:0;padding:0 24px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none;}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:var(--sans);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--sourdine);padding:16px 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--or);}

/* Panier et commande */
.woocommerce table.shop_table{border:1px solid var(--ligne);border-radius:0;background:var(--blanc);}
.woocommerce table.shop_table th{
  font-family:var(--sans);font-weight:400;
  font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--or);
}
.woocommerce-cart table.cart img{width:76px;box-shadow:var(--ombre);}
.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-billing-fields h3{font-family:var(--serif);font-weight:300;font-size:1.6rem;}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single{
  padding:14px 16px;border:1px solid var(--ligne);border-radius:0;
  background:var(--blanc);font-family:var(--sans);font-size:1rem;color:var(--texte);
  height:auto;
}
.woocommerce form .form-row label{
  font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--sourdine);
}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-top-color:var(--or);background:var(--blanc);border-radius:0;
}
.woocommerce-message::before,.woocommerce-info::before{color:var(--or);}
.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-result-count{font-family:var(--sans);color:var(--sourdine);font-size:.92rem;}

/* Responsive boutique */
@media (max-width:1024px){
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:26px;}
}
@media (max-width:860px){
  .entete-boutique{width:100%;justify-content:space-between;}
}
@media (max-width:560px){
  .woocommerce ul.products{grid-template-columns:1fr;}
  .woocommerce div.product form.cart{flex-direction:column;align-items:stretch;}
  .woocommerce .quantity .qty{width:100%;}
}

/* ===========================================================
   16. RESPONSIVE, teste a 390, 768 et 950
   =========================================================== */
@media (max-width:1024px){
  .hero-grille,.boussole-grille,.apropos-grille{gap:48px;}
  .temoignages{grid-template-columns:1fr;}
  .pied-grille{grid-template-columns:1fr 1fr;gap:40px;}
  .liste-articles{grid-template-columns:repeat(2,1fr);}
  .contact-texte{padding:56px 40px;}
}

/* Le menu bascule en hamburger avant que les liens ne se chevauchent */
@media (max-width:980px){
  .bascule-menu{display:inline-flex;}
  .entete-inner{position:relative;}
  .entete-droite{
    display:none;position:absolute;top:var(--entete-h);left:calc(var(--gouttiere) * -1);right:calc(var(--gouttiere) * -1);
    flex-direction:column;align-items:flex-start;gap:22px;
    background:var(--creme);border-bottom:1px solid var(--ligne);
    padding:26px var(--gouttiere) 34px;box-shadow:var(--ombre);
  }
  .entete-droite.est-ouvert{display:flex;}
  .menu-principal{flex-direction:column;align-items:flex-start;gap:15px;width:100%;}
  .entete-contacts{flex-direction:column;align-items:flex-start;gap:13px;}
}

@media (max-width:860px){
  .hero{padding:64px 0 76px;}
  .hero::before{font-size:260px;right:-40px;}
  .hero-grille,.boussole-grille,.apropos-grille{grid-template-columns:1fr;gap:44px;}
  .hero-media{order:-1;}
  .section{padding:76px 0;}
  .section-contact{margin:76px 0;}
  .piliers{grid-template-columns:1fr;}
  .contact-bloc{grid-template-columns:1fr;}
  .contact-texte{padding:48px 30px;}
  .contact-media{order:-1;}
  .contact-media img{min-height:280px;}
  .pied-grille{grid-template-columns:1fr;}
  .pied-bas{flex-direction:column;text-align:center;}
  .liste-articles{grid-template-columns:1fr;}
  .faq{padding:8px 24px;}
  .offre-hero{padding:76px 0 72px;}
}

@media (max-width:420px){
  :root{--gouttiere:18px;}
  .btn{padding:17px 28px;font-size:12px;letter-spacing:2px;width:100%;text-align:center;}
  .temoins .btn{width:auto;}
  .boussole-carte,.pilier,.temoignage{padding:26px 22px;}
  .faq-question{font-size:1.15rem;padding:22px 0;}
  .temoins{flex-direction:column;gap:16px;text-align:center;padding:18px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}