/* Maison Andre - version 1.0 - 31 juillet 2026 */
@layer maquettes, maquettes-ajust, site, ajustements, telephone;

/* ===========================================================================
   MAISON ANDRE - feuille de style du site

   ORDRE DES COUCHES
   La ligne ci-dessus est la seule chose qui decide qui l emporte. Une couche
   declaree plus tard bat une couche declaree plus tot, quelle que soit la
   specificite des selecteurs. C est ce qui permet a ce fichier de ne plus
   contenir de !important.

     maquettes        le dessin des 17 vignettes d outils, dans maquettes.css
     maquettes-ajust  ce qui corrige ce dessin
     site             la page : variables, blocs, echelle typographique
     ajustements      les declarations qui doivent l emporter sur une regle
                      plus specifique ou posee plus loin
     telephone        ce qui doit corriger l echelle typographique elle-meme
                      au format telephone, voir le bloc en fin de fichier

   Il en subsiste exactement un, sur la coupure des animations quand le
   systeme demande un mouvement reduit. Il porte sur le selecteur universel et
   doit couvrir toute transition posee ailleurs, y compris a venir : c est le
   cas d usage pour lequel !important existe. Toute autre reapparition dans ce
   fichier serait un contournement, pas un choix.

   POINTS DE RUPTURE
     max-width 767px    telephone
     min-width 768px    a partir de la tablette
     min-width 1600px   grands ecrans, la page s elargit avec --maxw
     min-width 1900px   et 2200px : seul le grossissement des maquettes change

   CONVENTIONS
     --maxw porte la largeur de page, tous les blocs s y alignent.
     Ne jamais ajouter de classe sur un element .panel : le script du
     carrousel reecrit cet attribut et toute classe en plus le desynchronise.
   =========================================================================== */
/* Aucune restriction de plage de caracteres : l ancienne valeur excluait
   U+00C0 a U+00FF, soit toutes les capitales et minuscules accentuees.
   Un titre contenant E accent aigu basculait alors en police de secours
   pour ces seules lettres, au milieu du mot. La police contient bien ces
   glyphes, verifie a la mesure. */
@font-face{font-family:'Nocken';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/nocken-medium.otf) format('opentype')}
@keyframes pfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes popinUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@layer site{
:root{--maxw:1200px;--paper:#F3E8DA;--panel:#FCF8F0;--panel-2:#ECDFCB;--ink:#3B1217;--ink-soft:#6A4A44;--muted:#756255;--line:#E0D1BC;--accent:#3B1217;--gold:#CFAA84;--maroon:#3B1217;--e1:0 1px 2px rgba(59,18,23,.07);--e2:0 12px 34px -14px rgba(59,18,23,.24);--serif:'Nocken','Futura','Century Gothic',system-ui,sans-serif;--display:'Nocken','Futura','Century Gothic',system-ui,sans-serif;--sans:"Helvetica Neue",-apple-system,system-ui,"Segoe UI",Arial,sans-serif;color-scheme:light}
@media (min-width:1600px){
  :root{--maxw:min(88vw,1760px)}
}
*{box-sizing:border-box}
button{font-family:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Lien d evitement. Il reste atteignable au clavier, donc ni display:none ni
   visibility:hidden, qui le sortiraient de l ordre de tabulation.
   Il est reduit a un point et decoupe, et non pousse hors de l ecran par une
   translation : sur les navigateurs mobiles, l effet elastique en haut de page
   decale la fenetre et revelait le lien a chaque defilement force. */
.evitement{position:fixed;top:0;left:0;z-index:1000;
  width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  background:var(--ink);color:var(--paper);border-radius:0 0 4px 0;
  font-size:14px;font-weight:600;text-decoration:none}
.evitement:focus{width:auto;height:auto;padding:12px 20px;overflow:visible;clip-path:none}
/* Le repere de contenu recoit le focus a l arrivee, sans contour permanent. */
main:focus{outline:none}
/* Gabarit commun des grands blocs */
.section{padding:clamp(46px,7vw,86px) 0}
.shell{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,5vw,44px)}
.shead .l .ey.big{font-family:var(--display);font-size:clamp(30px,5vw,52px);letter-spacing:.1em;color:var(--ink);font-weight:600;line-height:1.05}
.shead .l{flex:1;min-width:0}
.shead .l .ey{font-size:9.3px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.shead .l h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.6vw,38px);margin:10px 0 0;letter-spacing:.01em}
.shead .l p{color:var(--ink-soft);margin:10px 0 0;max-width:none;font-size:14.5px}
/* Defilement libre : pas d accroche sur les cartes, la galerie s arrete la ou on la lache. Une accroche obligatoire rattrapait la carte la plus proche et donnait un a-coup en fin de geste. */
.row{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 16px;-webkit-overflow-scrolling:touch}
.row::-webkit-scrollbar{height:6px}
.row::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
@media (hover:hover){
  .row{cursor:grab}
  .row.is-drag{cursor:grabbing;user-select:none;scroll-behavior:auto}
  .row.is-drag img{pointer-events:none}
}
.pc{flex:0 0 auto;width:248px;border:none;background:none;padding:0;text-align:left;display:block}
.pth{position:relative;aspect-ratio:3/4;border-radius:4px;overflow:hidden;border:1px solid var(--line);background:var(--panel-2);box-shadow:var(--e1);transition:box-shadow .18s,transform .18s}
.ptag{position:absolute;top:9px;left:9px;font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(20,10,12,.72);color:#f3e7d9;border-radius:4px;padding:4px 8px;z-index:2}
.pth img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
/* Clichés en format paysage logés dans une carte portrait : la coupe centrale
   par défaut sectionne le sujet. On choisit la fenêtre à conserver. */
.pth img[src$="regina.webp"]{object-position:65% 50%}
.pn{display:block;font-weight:600;font-size:14.5px;margin-top:11px;line-height:1.25}
.pcity{display:block;font-size:9.3px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}
/* Titre de section, reutilisable */
.sectitle{font-family:var(--display);font-size:clamp(30px,5vw,52px);letter-spacing:.1em;color:var(--ink);font-weight:600;line-height:1.05;text-transform:uppercase}
/* Les grands titres tiennent sur une ligne sur les ecrans larges. Le retour a
   la ligne leur est rendu au format telephone, par la couche ajustements, et
   leur taille y est reprise par la couche telephone. */
.sectitle,.ey.big{white-space:nowrap}
.contact .lead{color:var(--ink-soft);font-size:16px;line-height:1.7;max-width:none;margin:22px 0 34px}
.contact-form2{max-width:840px}
.frow{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
@media (max-width:767px){
  .frow{grid-template-columns:1fr}
}
.cfield{margin-bottom:18px}
.cfield label{display:block;font-size:9.3px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.cfield input, .cfield textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink);font-family:inherit;font-size:15px;resize:vertical}
.cfield input:focus, .cfield textarea:focus{outline:none;border-color:var(--accent)}
.cbtn{display:inline-block;width:auto;margin-top:8px;padding:15px 38px;border:none;border-radius:3px;background:var(--maroon);color:#F5F1E8;font-weight:600;font-size:15px;letter-spacing:.03em;cursor:pointer;transition:filter .15s}
.cbtn:hover{filter:brightness(1.12)}
.cmsg{margin-top:16px;font-size:13.5px;color:var(--accent);min-height:18px}
/* Mention d information sur les donnees. Placee avant le bouton pour etre lue
   avant l envoi, et non reléguee sous lui. */
/* Aucune largeur de lecture ici : la mention s aligne sur le formulaire, comme
   la grille des champs et la zone de message. Une limite en ch la laisserait
   plus courte que tout le reste du bloc. */
.cmention{margin:22px 0 4px;font-size:12.5px;line-height:1.6;color:var(--ink-soft)}
.cmention a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.foot-bar{max-width:var(--maxw);margin:0 auto;padding:22px clamp(18px,5vw,44px);display:flex;justify-content:space-between;align-items:center;gap:18px 28px;flex-wrap:wrap;font-size:10.6px;letter-spacing:.04em;color:var(--muted)}
.foot-bar a{color:var(--muted);text-decoration:none;transition:color .14s}
.foot-bar a:hover{color:var(--accent)}
.hero .shell{text-align:center}
.hero-logo{width:min(400px,82%);height:auto;display:block;margin:0 auto clamp(30px,6vh,58px)}
.tabs-head{margin-bottom:clamp(12px,1.5vw,18px)}
.tabs-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(24px,3vw,34px)}
.pill{font-family:var(--sans);font-size:14px;letter-spacing:.02em;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;padding:9px 20px;cursor:pointer;transition:.25s}
.pill:hover{border-color:var(--accent);color:var(--accent)}
.pill.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.panel{display:none;grid-template-columns:1.75fr 1fr;gap:clamp(24px,2.6vw,44px);align-items:center}
.panel.active{display:grid}
.panel-img{border-radius:4px;overflow:hidden;box-shadow:var(--e1)}
.panel-img img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.panel-txt h3{font-size:clamp(20px,2vw,26px);line-height:1.25;color:var(--ink);font-weight:600;margin:0 0 14px}
.panel-txt p{font-size:clamp(15px,1.5vw,17px);line-height:1.65;color:var(--ink-soft);max-width:46ch;margin:0}
.panel-tags{margin-top:20px;padding-top:15px;border-top:1px solid var(--line);font-size:10.6px;letter-spacing:.05em;color:var(--muted);line-height:1.9}
@media (max-width:767px){
  .panel-img{order:0}
}
.tool{width:100%;height:100%;display:flex;flex-direction:column;font-family:var(--sans);color:var(--ink)}
.gt-ring{width:64px;height:64px;display:block}
.tt-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tt-chip{font-size:9.3px;font-weight:600;color:var(--ink);background:#EFE4D3;border:1px solid var(--line);border-radius:5px;padding:3px 10px;letter-spacing:.01em}
.tt-kw{font-size:10.2px;letter-spacing:.04em;color:var(--muted);line-height:1.85}
.exp-head{max-width:var(--maxw);margin:0 auto;padding:clamp(46px,7vw,86px) clamp(18px,5vw,44px) 0}
.tabs-title{font-size:clamp(27px,3.7vw,47px);line-height:1.12;color:var(--ink);margin:0;max-width:none;font-family:var(--display);letter-spacing:.01em;font-weight:400}
.exp-head .ey.big{text-transform:uppercase;font-family:var(--display);font-weight:600}
/* Toutes les maquettes au ratio de PMS, 6/5 */
.tabs .panel-img{overflow:hidden}
.methode{max-width:var(--maxw);margin:0 auto;padding:clamp(48px,7vw,92px) clamp(18px,5vw,44px) 0}
.meth-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(16px,2.2vw,28px);margin-top:clamp(30px,3.4vw,46px)}
.meth-card{position:relative;background:#F8F3EA;border:1px solid #EADFCB;border-radius:14px;padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;box-shadow:0 6px 22px rgba(59,18,23,.05),0 1px 2px rgba(59,18,23,.06);transition:transform .25s ease,box-shadow .25s ease}
.meth-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px -12px rgba(59,18,23,.20),0 2px 6px rgba(59,18,23,.06)}
.meth-card::before{content:'';display:block;width:46px;height:3px;border-radius:2px;background:#3B1217;margin:0 auto 18px}
.meth-name{font-family:var(--display);font-size:clamp(21px,2.1vw,28px);font-weight:600;color:var(--ink);margin:0 0 10px;letter-spacing:.01em}
.meth-line{font-style:italic;font-size:15px;line-height:1.45;color:var(--ink);margin:0 0 12px}
.meth-desc{font-size:12.5px;line-height:1.65;color:var(--ink-soft);margin:16px 0 0}
.meth-inc{display:flex;flex-direction:column;gap:9px;margin:4px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.meth-inc-t{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:4px;text-align:left}
.meth-i{font-size:12.5px;color:var(--ink);display:flex;align-items:flex-start;gap:10px;text-align:left;line-height:1.45}
.meth-i::before{content:'✓';width:18px;height:18px;border-radius:50%;background:rgba(142,155,126,.22);color:#556047;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:1px}
@media (min-width:768px){
  @supports (grid-template-rows:subgrid){
    .meth-cols{grid-template-rows:repeat(4,auto)}
    .meth-card{display:grid;grid-template-rows:subgrid;grid-row:span 4}
  }
}
.methode .meth-card.c1{background:#FBF7F0;border-color:#E6D6BF}
.methode .meth-card.c1::before{background:#9C5C29}
/* bande de fond pleine largeur, sans bloc */
.methode{background:#EFE4D3}
.methode .meth-card.c3{background:#F8F3EA;border-color:#E0CFB3}
.methode .meth-card.c3::before{background:#9C5C29}
/* carte 2 : la plus importante, bordeaux plein */
.methode .meth-card.c2{background:#3B1217;border-color:#3B1217;box-shadow:0 16px 40px -12px rgba(59,18,23,.45),0 2px 6px rgba(59,18,23,.10)}
.methode .meth-card.c2:hover{box-shadow:0 26px 54px -14px rgba(59,18,23,.55),0 2px 6px rgba(59,18,23,.12)}
.methode .meth-card.c2::before{background:#CFAA84}
.methode .meth-card.c2 .meth-name{color:#F7EFE3}
.methode .meth-card.c2 .meth-line{color:#E9D9C4}
.methode .meth-card.c2 .meth-inc{border-top-color:rgba(207,170,132,.34)}
.methode .meth-card.c2 .meth-inc-t{color:#CFAA84}
.methode .meth-card.c2 .meth-i{color:#F3E8DA}
.methode .meth-card.c2 .meth-i::before{background:rgba(207,170,132,.20);color:#CFAA84}
.methode .meth-card.c2 .meth-desc{color:rgba(243,232,218,.70)}
.prt-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:10px;margin-top:clamp(26px,3vw,40px)}
.prt-cell{border:1px solid var(--line);border-radius:8px;min-height:50px;display:flex;align-items:center;justify-content:center;background:#F7EFE3;padding:8px}
.prt-cell span{font-size:11.0px;font-weight:600;color:var(--ink);letter-spacing:.01em;text-align:center}
.tabs .panel-img>.tool{height:100%;display:flex;flex-direction:column}
/* Les maquettes remplissent leur cadre */
.tabs .panel-img>.tool>.ds, .tabs .panel-img>.tool>.sh, .tabs .panel-img>.tool>.ak, .tabs .panel-img>.tool>.pr3, .tabs .panel-img>.tool>.cq{flex:1 1 auto;min-height:0}
/* Chaque categorie d expertise dans une carte encadree */
.tabs{max-width:var(--maxw);margin:0 auto;padding:clamp(13px,1.7vw,20px) clamp(16px,4vw,40px)}
.tabs .shell{background:#ECDFCB;border:1px solid #E0CFB3;border-radius:18px;padding:clamp(18px,2vw,26px) clamp(26px,3vw,44px);box-shadow:0 2px 10px rgba(59,18,23,.05)}
.tabs .tabs-panels{background:#F7EFE2;border:1px solid #E8DAC2;border-radius:12px;padding:clamp(18px,2.4vw,30px)}
/* Bloc d accroche */
.hero{display:flex;padding:clamp(56px,12vh,140px) 0 clamp(40px,7vh,84px)}
.hero-accroche{font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-weight:500;line-height:1.08;color:var(--ink);text-wrap:balance;font-size:clamp(23px,3.3vw,40px);margin:0 auto 20px;max-width:20ch}
.hero-lead{line-height:1.5;color:var(--ink);max-width:62ch;margin:0 auto;font-size:clamp(16px,1.9vw,21px)}

/* Bloc d accroche, version photo */
.hero-photo{position:relative;min-height:90vh;background:#2a1410 url(../img/hero-mas.webp) center/cover no-repeat;display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,14,10,.32),rgba(30,14,10,.10) 42%,rgba(30,14,10,.52));z-index:1}
.hero-photo .shell{position:relative;z-index:2;text-align:center;width:100%}
/* 720 px reste sous la definition du fichier, qui en fait 1200 : le logo
   grandit sans perdre en nettete et garde l avance visuelle sur le titre. */
.hero-photo .hero-logo{width:min(720px,80%);height:auto;margin:0 auto;filter:drop-shadow(0 2px 16px rgba(0,0,0,.32))}
.hero-arrow{position:absolute;bottom:clamp(24px,4vh,44px);left:50%;transform:translateX(-50%);z-index:2;width:50px;height:50px;border:1px solid rgba(247,239,227,.55);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#F7EFE3;font-size:19px;text-decoration:none;transition:background .2s}
.hero-arrow:hover{background:rgba(247,239,227,.12)}
.brand-intro{padding:clamp(56px,8vh,104px) 0;text-align:center;background:var(--paper)}
.brand-intro .shell{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,5vw,44px)}
/* Fond clair, bandes bordeaux */
body{margin:0;color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;background:#F5EFE3}
.brand-intro{background:#3B1217;color:#F3E8DA}

/* Pilules d onglet au bordeaux de la charte */
.tabs .pill{border-color:var(--ink);color:var(--ink)}
.tabs .pill.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* Titres de section au bordeaux de la charte */
.ey.big, .tabs-title{color:var(--ink)}
/* Cartes d expertise sur fond clair */
.tabs .shell{background:#F8F3EA;border:1px solid #EADFCB;box-shadow:0 6px 22px rgba(59,18,23,.06)}
.tabs .tabs-panels{background:#FFFFFF;border:1px solid #EFE7D8}
html{scroll-behavior:smooth}
/* bande intro : contenu aligné à gauche comme les autres blocs */
.brand-intro{text-align:center}
.brand-intro 
/* aligner le contenu de la bande sur le meme repere que Nos expertises (double marge) */
/* GRILLE UNIQUE : memes gouttieres gauche/droite pour tous les blocs */
.brand-intro .shell, .exp-head{max-width:none;padding-left:calc(max(0px,(100% - var(--maxw))/2) + clamp(16px,4vw,40px));padding-right:calc(max(0px,(100% - var(--maxw))/2) + clamp(16px,4vw,40px))}
.exp-head .shell{max-width:none;padding-left:0;padding-right:0}
.brand-intro .hero-accroche{color:#F7EFE3;margin-left:auto;margin-right:auto;text-align:center}
.brand-intro .hero-lead{color:#E8DBCB;margin-left:auto;margin-right:auto;text-align:center;max-width:none}
/* etendre la grille unique a tous les blocs */
.methode, .section{max-width:none;padding-left:calc(max(0px,(100% - var(--maxw))/2) + clamp(16px,4vw,40px));padding-right:calc(max(0px,(100% - var(--maxw))/2) + clamp(16px,4vw,40px))}
.methode > .shell, .section > .shell{max-width:none;padding-left:0;padding-right:0}

.popin.hidden{display:none}
.popin-close{position:absolute;top:7px;right:10px;background:none;border:none;color:rgba(243,232,218,.65);font-size:22px;line-height:1;cursor:pointer;padding:4px;transition:color .15s}
.popin-close:hover{color:#F3E8DA}
.popin-ey{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:#CFAA84;margin-bottom:7px}
.popin-title{font-family:var(--display);font-size:20px;line-height:1.12;color:#F7EFE3;margin-bottom:8px}
.popin-txt{font-size:12.5px;line-height:1.45;color:rgba(243,232,218,.72);margin-bottom:16px}
.popin-btn{display:block;text-align:center;background:#F3E8DA;color:#3B1217;font-weight:600;font-size:13px;letter-spacing:.02em;padding:11px 12px;border-radius:8px;text-decoration:none;cursor:pointer;transition:background .18s}
.popin-btn:hover{background:#fff}
.popin{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:60;width:min(322px,86vw);background:#3B1217;color:#F3E8DA;border-radius:14px;padding:20px 22px 22px;box-shadow:0 18px 46px rgba(59,18,23,.34);border:1px solid rgba(207,170,132,.22);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .5s ease, transform .5s ease}
.popin.show{opacity:1;transform:none;pointer-events:auto}
.popin.gone{opacity:0;transform:translateY(20px);pointer-events:none}
@media (max-width:767px){
  .tabs .panel-img>.tool{width:360px;height:auto;min-height:300px;display:flex;flex-direction:column}
  .tabs .shell{padding:18px 15px;border-radius:14px}
  .tabs .tabs-panels{padding:11px;border-radius:10px}
  .tabs-head{margin-bottom:14px}
  .panel.active{grid-template-columns:1fr;gap:16px}
  /* bande intro */
  .brand-intro{padding:38px 0}
  /* accompagnement : cartes empilees */
  .meth-cols{display:grid;grid-template-columns:1fr;gap:12px}
  /* 1. hierarchie : titres de section (H1) plus gros que titres de categorie (H2) */
  .ey.big{line-height:1.06;text-wrap:balance}
  .tabs-title{font-size:21px;line-height:1.12}
  /* 2. bande intro : ancres empilees, centrees */
  .brand-intro 
  /* 3. maquettes : centrees quand plus etroites que le panneau */
  .tabs .panel-img{display:flex;justify-content:center;align-items:flex-start}
  .panel-txt p{font-size:13.5px;line-height:1.4}
  .prt-cell{padding:9px 3px;border-radius:7px}
  .prt-cell span{font-size:9.5px}
  /* 5. clients : gouttiere + galerie qui demarre a la gouttiere */
  .section .row{padding-left:0;padding-right:0}
  /* 6. CTA pleine largeur */
  .cbtn{width:100%;display:block}
}
/* slider : chevrons fins, centres sur la maquette */
.tabs .shell{position:relative}
/* mini enveloppe (mobile) */
.popin-mini{display:none;position:fixed;right:16px;bottom:16px;z-index:60;width:56px;height:56px;border-radius:50%;background:#3B1217;color:#F3E8DA;border:1px solid rgba(207,170,132,.3);box-shadow:0 10px 28px rgba(59,18,23,.34);align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .5s ease, transform .5s ease}
.popin-mini.show{opacity:1;transform:none;pointer-events:auto}
.popin-mini.gone{opacity:0;transform:translateY(20px);pointer-events:none}
/* Fermer l encart ne doit pas supprimer l acces au contact. Sur ordinateur la
   pastille est normalement masquee : elle prend ici le relais de l encart.
   L echange est joue en deux temps, l encart se replie vers le coin puis
   l enveloppe y eclot, pour que la fermeture se lise comme une reduction et
   non comme une disparition. */
body.encart-reduit .popin-mini{display:flex}
.popin.replie{opacity:0;transform:translateY(10px) scale(.92);pointer-events:none}
.popin-mini.eclot{animation:eclosion .32s cubic-bezier(.2,.7,.3,1.15) .12s both}
@keyframes eclosion{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .popin-mini.eclot{animation:none}
}

@media (max-width:767px){
  .popin{right:12px;left:12px;bottom:12px;width:auto;padding:16px 18px 18px;display:none}
  .popin-mini{display:flex}
  .tabs .pill{border-width:1px;font-size:11px;padding:5px 9px}
  .tabs-pills{margin-bottom:16px}
}
/* carrousel : defilement natif a accroche (trackpad 2 doigts + doigt mobile) */
.tabs-panels{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-x;overscroll-behavior-x:contain;transition:height .4s cubic-bezier(.4,0,.2,1)}
.tabs-panels::-webkit-scrollbar{display:none;width:0;height:0}
/* Prise en main a la souris, comme la galerie clients. Pendant le geste
   l accrochage est suspendu : en mode obligatoire, il ramenerait le cadre au
   panneau le plus proche a chaque image et le glisser serait impossible. */
@media (hover:hover){
  .tabs-panels{cursor:grab}
  .tabs-panels.est-pris{cursor:grabbing;user-select:none;scroll-behavior:auto;scroll-snap-type:none}
  .tabs-panels.est-pris img{pointer-events:none}
}
.p-track{display:flex;align-items:flex-start}
@media (max-width:767px){
  .p-track > .panel{grid-template-columns:1fr}
  .tabs-panels{overflow:hidden;scroll-snap-type:none;touch-action:auto;-webkit-overflow-scrolling:auto}
  .p-track{transition:transform .38s cubic-bezier(.4,0,.2,1)}
}
.p-track > .panel{display:grid;flex:0 0 100%;min-width:100%;width:100%;animation:none;scroll-snap-align:center;box-sizing:border-box;padding:clamp(10px,1.3vw,16px) clamp(18px,2.4vw,30px)}
@media (max-width:767px){
  .p-track > .panel{padding:10px 12px}
}
/* points de slider */
.p-dots{display:flex;justify-content:center;align-items:center;gap:7px;margin:18px 0 0}
.p-dot{width:8px;height:8px;border-radius:99px;border:none;padding:0;background:var(--gold);opacity:.42;cursor:pointer;transition:width .28s ease,opacity .28s ease,background .28s ease}
.p-dot.active{width:22px;opacity:1;background:var(--ink)}
.p-dot:hover{opacity:.8}
/* ecart uniforme entre les grands blocs (desktop + mobile) */
:root{--secpad:clamp(32px,3.4vw,44px)}
.exp-head{padding-top:var(--secpad)}
.methode{padding-top:var(--secpad);padding-bottom:var(--secpad)}
/* en-tetes de section : titres agrandis, ensemble centre */
.exp-head .shell, .methode > .shell, .shead .l{text-align:center}
.shead{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:10px;justify-content:center}
@media (min-width:768px){
  .exp-head .ey.big, .methode .ey.big, .shead .l .ey.big{font-size:clamp(38px,5.6vw,64px)}
}
.exp-sub{font-size:clamp(15px,1.6vw,18px);line-height:1.55;color:var(--ink-soft);margin:16px 0 0;max-width:none;margin-left:auto;margin-right:auto}
.meth-sub{font-size:clamp(15px,1.6vw,18px);line-height:1.55;color:var(--ink-soft);margin:16px 0 0;max-width:none;margin-left:auto;margin-right:auto}
.shead .l p.sec-intro{color:var(--ink-soft);font-size:16px;line-height:1.7;margin:16px 0 4px;max-width:none;margin-left:auto;margin-right:auto}
.lamaison .ey.big{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink);line-height:1.05;font-size:clamp(38px,5.6vw,64px)}
.lm-sub{font-size:clamp(15px,1.6vw,18px);line-height:1.55;color:var(--ink-soft);margin:16px 0 0}
.lm-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);margin-top:clamp(24px,3.2vw,40px);text-align:left}
.lm-card{background:#F8F3EA;border:1px solid #EADFCB;border-radius:14px;padding:clamp(22px,2.8vw,36px);box-shadow:0 6px 22px rgba(59,18,23,.05)}
.lm-tag{font-family:var(--display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:12px}
.lm-card h3{font-size:clamp(19px,1.9vw,24px);line-height:1.25;color:var(--ink);font-weight:600;margin:0 0 12px}
.lm-card p{font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.68;color:var(--ink-soft);margin:0}
.lm-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.lm-photo{width:clamp(76px,8vw,100px);height:clamp(76px,8vw,100px);border-radius:12px;object-fit:cover;flex:0 0 auto}
.lm-head h3{margin:0}
@media (max-width:767px){
  .lm-grid{grid-template-columns:1fr}
}
.section{padding-top:var(--secpad);padding-bottom:var(--secpad)}
.contact{padding:clamp(50px,7vw,92px) 0 clamp(10px,2vw,22px);padding-top:var(--secpad);background:#EFE4D3;padding-bottom:var(--secpad)}
.lamaison{max-width:none;padding:var(--secpad) calc(max(0px,(100% - var(--maxw))/2) + clamp(16px,4vw,40px));text-align:center;background:#EFE4D3}
/* le pied de page prolonge la bande : plus de bandeau vide entre les deux */
.footer{border-top:1px solid var(--line);margin-top:0;background:#EFE4D3;border-top-color:rgba(59,18,23,.12)}
/* Notre accompagnement : tenir sur un ecran 14 pouces, grand titre inclus */
.methode .meth-card::before{width:58px;height:4px}
.methode .ey.big{font-family:var(--display);font-weight:600;text-transform:uppercase;line-height:1.0;margin-bottom:0}
.methode .meth-sub{margin-top:10px}
.methode .meth-cols{margin-top:22px}
.methode .meth-card{padding:20px clamp(18px,1.6vw,24px)}
.methode .meth-name{font-size:clamp(19px,1.7vw,23px);margin-bottom:6px}
.methode .meth-line{font-size:14px;margin-bottom:8px}
.methode .meth-inc{gap:6px;padding-top:11px;margin-top:2px}
.methode .meth-inc-t{color:#9C5C29;margin-bottom:2px}
.methode .meth-i::before{background:rgba(59,18,23,.09);color:#3B1217}
@media (max-width:767px){
  .methode .meth-card{padding:20px 18px}
  .methode .meth-name{font-size:21px}
  .methode .meth-line{font-size:14.5px}
}
/* Nos clients : bloc plein ecran sur 14 pouces, images agrandies */
.section .pc{width:clamp(240px,23.5vw,350px)}
.section .pth{aspect-ratio:3/4}
.section .pn{font-size:16px;margin-top:12px}
.section .pcity{font-size:10px;margin-top:4px}
@media (max-width:767px){
  .section .pth{aspect-ratio:3/4}
}
@media (min-width:768px){
  .prt-wall{grid-template-columns:repeat(6,1fr)}
}
@media (min-width:1600px){
  .exp-sub, .meth-sub, .lm-sub, .shead .l p.sec-intro{max-width:1120px;margin-left:auto;margin-right:auto}
  .contact .lead{max-width:1120px}
}
@media (min-width:1600px) and (min-height:800px){
  .methode{min-height:86vh;display:flex;flex-direction:column;justify-content:center}
}
@media (min-width:1600px){
  .contact-form2{max-width:1120px}
}
.panel-txt h4{line-height:1.25;color:var(--ink);font-weight:600;margin:0 0 14px;font-size:20px;margin-bottom:8px}
/* 2. Section contact centree comme les autres, a ta demande. */
.contact{text-align:center}
.contact .lead{margin-left:auto;margin-right:auto}
.contact .contact-form2{margin-left:auto;margin-right:auto;text-align:left}
@media (min-width:1600px){
  .meth-cols{row-gap:clamp(38px, 29.33px + 1.04vw, 56px)}
  .meth-card .meth-name{font-size:clamp(28px, 16.34px + 0.73vw, 35px)}
  .meth-card .meth-line{font-size:clamp(17px, 10.33px + 0.42vw, 21px)}
  .meth-card .meth-inc-t{font-size:clamp(12px, 7px + 0.31vw, 15px)}
}
/* =========================================================================== STRUCTURE D UNE GRANDE PARTIE Chaque bloc suit le meme gabarit : un titre H2, puis un paragraphe d introduction. Memes marges, meme largeur de lecture, meme interligne. Deux exceptions assumees, documentees plus bas. =========================================================================== */
:root{--bloc-avant-titre: clamp(30px, 2.08vw, 53px);--bloc-apres-titre: clamp(10px, 0.63vw, 16px);--bloc-lecture: 1120px}
/* Le titre de grande partie */
h2, h2[class][class][class][class][class]{margin-top:var(--bloc-avant-titre);margin-bottom:0}
.lamaison--sombre h2{color:var(--gold)}
/* Le bloc outils garde la classe partners : il reutilise le dessin d origine des vignettes, concu pour fond sombre, au lieu de le reecrire. */
/* =========================================================================== LA MAISON : trois cartes, un seul gabarit Chacune suit la meme sequence : surtitre, titre, paragraphe, puis un contenu propre (photo pour le fondateur, mur d outils pour la troisieme). Meme fond, meme rayon, meme marge interieure, meme alignement a gauche. =========================================================================== */
.lm-outils{margin-top:clamp(16px,2vw,24px);text-align:left}
.lm-outils h3{color:var(--ink)}
.lm-outils p{color:var(--ink-soft);max-width:none;margin:0}
/* Le mur d outils : contour fin sur fond clair, deux rangs de sept. */
.lm-outils .prt-wall{margin-top:clamp(20px,2vw,28px)}
.lm-outils .prt-cell span{color:var(--ink-soft)}
/* =========================================================================== LA MAISON en bordeaux : la section fait respirer la page entre deux blocs clairs. Les trois cartes restent identiques entre elles, seulement inversees en contraste. =========================================================================== */
.lamaison--sombre{background:var(--ink);color:var(--paper)}
.lamaison--sombre .ey.big.ey.big.ey.big{color:var(--gold)}
.lamaison--sombre .lm-sub{color:rgba(243,232,218,.82)}
.lamaison--sombre .lm-card{background:rgba(243,232,218,.05);border:1px solid rgba(207,170,132,.20);box-shadow:none}
.lamaison--sombre .lm-tag{color:var(--gold)}
.lamaison--sombre .lm-outils .prt-cell{border-color:rgba(207,170,132,.22)}
@media (min-width:1600px){
  .panel-img{overflow:hidden}
  .panel-img > .tool{width:591px;height:492px;zoom:1.30}
}
@media (min-width:1900px){
  .panel-img > .tool{zoom:1.45}
}
@media (min-width:2200px){
  .panel-img > .tool{zoom:1.60}
}
/* Les 70 textes des graphiques portaient une police ecrite en dur dans le balisage, Helvetica ou Helvetica,Arial, absente du reste du site. En SVG un attribut de presentation cede devant une regle CSS : une seule declaration suffit pour les rattacher a la police du site. */
svg text{font-family:var(--sans)}
}

/* ===========================================================================
   AJUSTEMENTS
   Les declarations qui doivent l emporter sur une regle plus specifique ou
   posee plus loin. Elles ne crient plus : cette couche est declaree apres
   les autres, et l ordre des couches prime sur la specificite.
   =========================================================================== */
@layer ajustements{
.tabs .panel-img{aspect-ratio:6/5}
/* 64vh reste la hauteur de la photo au format telephone, ou la bande bordeaux
   est trop haute pour tenir avec elle dans un seul ecran. */
.hero{align-items:center;min-height:64vh}
/* A partir de la tablette, la photo et la bande bordeaux forment un ensemble
   d exactement une hauteur d ecran. La bande prend ce dont son texte a besoin,
   la photo occupe le reste : les deux sont donc toujours vus d un seul regard,
   quelle que soit la hauteur de la fenetre. Une valeur en vh fixe ne pourrait
   pas y arriver, la bande ne grandissant pas au meme rythme que l ecran.
   svh plutot que vh : sur les navigateurs mobiles, vh ignore la barre d outils
   et deborderait d autant. */
@media (min-width:768px){
  .ouverture{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
  .ouverture .hero{flex:1 1 auto;min-height:0}
  .ouverture .brand-intro{flex:0 0 auto}
}
.tabs .pill:hover{border-color:var(--ink);background:rgba(59,18,23,.07);color:var(--ink)}
/* Le titre de page doit dominer les titres de section, sinon la page annonce
   ses rubriques plus fort que son sujet. Il passe de 37 a 52 px sur grand
   ecran, les titres de section descendent de 48,5 a 38. */
.brand-intro .hero-accroche{max-width:none;font-size:clamp(24px,14px + 2.63vw,52px);letter-spacing:.03em}
@media (max-width:767px){
  .tabs{padding:10px 12px}
  .panel-txt h3{font-size:20px;margin-bottom:8px}
  .hero-photo{min-height:82vh}
  .ey.big{white-space:normal}
  
  .tabs .panel-img{aspect-ratio:auto;height:auto}
  .prt-wall{grid-template-columns:repeat(3,1fr);gap:6px}
}
.popin-mini.hidden{display:none}
@media (max-width:767px){
  .tabs-pills{gap:6px}
}
.tabs .tabs-panels{padding:0}
.brand-intro{padding-top:var(--secpad);padding-bottom:var(--secpad)}
#cat-surmesure{padding-bottom:var(--secpad)}
.methode .meth-card::before{display:none}
.methode .meth-i{font-size:11.8px;line-height:1.32;gap:8px}
.methode .meth-i::before{width:15px;height:15px;font-size:8px}
.methode .meth-desc{font-size:11.8px;line-height:1.5;margin-top:10px}
@media (max-width:767px){
  .methode .meth-i{font-size:13px;line-height:1.45}
  .methode .meth-i::before{width:17px;height:17px}
  .methode .meth-desc{font-size:13px;line-height:1.6}
  .methode .meth-inc{gap:8px}
  .section .pc{width:clamp(230px,72vw,280px)}
  .section .pn{font-size:15px}
}
@media (min-width:1600px){
  .brand-intro .hero-lead{max-width:1000px;margin-left:auto;margin-right:auto}
  .brand-intro .hero-accroche{max-width:1120px;margin-left:auto;margin-right:auto}
  .meth-card{padding:clamp(24px, 14px + 0.63vw, 30px) clamp(29px, 15.67px + 0.83vw, 37px)}
  .meth-card .meth-i, .meth-card .meth-desc{font-size:clamp(14.4px, 8.4px + 0.375vw, 18px)}
}
h3{font-family:var(--display);font-size:clamp(28px,22.2px + 0.97vw,47px);font-weight:400;line-height:1.18}
h3.h3-tuile.h3-tuile.h3-tuile.h3-tuile.h3-tuile{font-size:clamp(23px,16.3px + 0.73vw,35px);font-weight:600}
h3.h3-portrait.h3-portrait.h3-portrait.h3-portrait.h3-portrait{font-size:clamp(19px,17.5px + 0.26vw,24px);font-weight:600}
.hero-lead, .meth-line{font-size:clamp(17px,15.7px + 0.21vw,21px)}
.meth-sub, .exp-sub, .lm-sub, .sec-intro, .lead, .meth-desc, .meth-i, .panel-txt p, .lm-card p{font-size:clamp(15px,14.0px + 0.16vw,18px)}
h2, h2[class][class][class][class][class]{font-family:var(--display);font-size:clamp(21px,15px + 1.6vw,38px);font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.12}
.meth-sub, .exp-sub, .lm-sub, .sec-intro, .contact .lead{margin:var(--bloc-apres-titre) auto 0;max-width:var(--bloc-lecture);line-height:1.55;font-size:clamp(15px,14.0px + 0.16vw,18px)}
.lm-outils .shell{background:none;border:0;box-shadow:none;padding:0;max-width:none;text-align:left}
.lm-outils .prt-cell{background:transparent;border:1px solid var(--line);border-radius:8px}
@media (min-width:768px){
  .lm-outils .prt-wall{grid-template-columns:repeat(7,1fr)}
}
.lamaison--sombre .lm-card h3{color:var(--paper)}
.lamaison--sombre .lm-card p{color:rgba(243,232,218,.78)}
.lamaison--sombre .lm-outils .prt-cell span{color:rgba(243,232,218,.86)}
}

/* ===========================================================================
   TELEPHONE
   Derniere couche, elle passe apres tout le reste.

   Elle existe pour une raison precise : l echelle typographique cible les
   titres par leur balise, avec une specificite volontairement elevee pour
   couvrir tous les cas. Une adaptation d ecran ne pouvait donc pas la
   corriger, meme posee plus loin. Le probleme s est vu sur un mot : a 34 px,
   ACCOMPAGNEMENT mesure 455 px pour un bloc de 351, la page devenait
   defilable lateralement sur telephone.

   Tout ce qui doit reduire ou annuler l echelle typographique au format
   telephone se pose ici, et nulle part ailleurs.
   =========================================================================== */
@layer telephone{
  @media (max-width:767px){
    /* Cale sur le mot le plus long des titres de section. */
    .ey.big{font-size:clamp(19px,6vw,28px)}
  }
}