/*
Theme Name: Planéo Conseil
Description: Thème sur mesure — urbanisme et approbations, Gatineau. Reconstruit fidèlement du prototype, avec héros responsive et contenu administrable.
Version: 1.1
Text Domain: planeo-conseil
*/

:root{
  --ink:#17352c; --deep:#102a23; --moss:#879e3e;
  --sand:#e9e1d3; --paper:#f7f5ef; --line:#17352c2b;
  --header-h:88px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,blockquote{font-family:Georgia,Times New Roman,serif;font-weight:400;letter-spacing:-.045em}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;z-index:99;background:var(--ink);color:#fff;padding:10px 16px}

/* ---------- entête ---------- */
.site-header{position:relative;z-index:20;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;gap:40px;
  height:var(--header-h);padding:0 4.5vw;background:#f7f5eff5;
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line)}
/* 2026-09-08 : 26px → 60px. Logo inchangé (1.0.5). */
.brand img{height:76px;width:auto}
.main-nav{display:flex;gap:clamp(22px,3vw,46px);justify-content:center}
.main-nav a{position:relative;text-decoration:none;text-transform:uppercase;
  letter-spacing:.14em;font-size:9px;color:var(--ink)}
.main-nav a:after{content:"";background:var(--moss);height:1px;transition:right .2s;
  position:absolute;bottom:-8px;left:0;right:100%}
.main-nav a:hover:after{right:0}
.header-actions{justify-self:end;display:flex;align-items:center;gap:24px}
.lang-switch{display:flex;align-items:center;gap:5px;font-size:9px;
  text-transform:uppercase;letter-spacing:.14em;color:#89938f}
.lang-switch a{text-decoration:none;color:inherit;padding:4px 1px}
.lang-switch a[aria-current]{color:var(--ink);font-weight:700}
.header-contact{text-decoration:none;text-transform:uppercase;letter-spacing:.14em;
  font-size:9px;font-weight:400;color:var(--ink);
  border-style:solid;border-width:0 0 1px 0;border-color:var(--ink);
  border-radius:0;box-shadow:none;outline:none;
  padding:12px 0 8px;line-height:1;background:transparent}
/* modèle: souligné seul — jamais de boîte (1.0.8/1.0.9) */
.header-contact:hover,.header-contact:focus{opacity:.78;background:transparent;color:var(--ink);
  border-color:var(--ink);box-shadow:none}
.mobile-nav{display:none}

/* ---------- héros ---------- */
.hero{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  background:var(--deep);color:#fff;
  /* 2026-09-09 : hauteur de 1er écran (pli jusqu'au CTA), fluide svh pour portables.
     Max retiré — un plafond à ~900px laissait la section suivante dépasser sous le pli. */
  height:clamp(560px,calc(100svh - var(--header-h)),1200px);min-height:0}
.hero-picture{display:contents}
.hero-background{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 52%}
.hero-overlay{position:absolute;inset:0;
  /* modèle : double dégradé #08231b (latéral + bas) */
  background:linear-gradient(90deg,#08231bd6,#08231b38 72%),linear-gradient(#0000 42%,#08231b85)}
.hero-copy{position:relative;z-index:1;max-width:1180px;padding:0 5vw 8vh}
/* 1.0.14 : modèle clamp(62px,8vw,126px) sans min(svh) (compare approuvé) */
.hero h1{max-width:min(1080px,78vw);margin:0;font-size:clamp(62px,8vw,126px);
  line-height:.91;font-weight:400;letter-spacing:-.045em}
.hero h1 em{color:#d9dfc4;font-weight:400;font-style:italic}
.hero-lede{color:#ffffffc7;max-width:660px;margin:30px 0 0;font-size:16px;line-height:1.8;opacity:1}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:32px;margin-top:34px}

/* Vision — top-right ON the photo (model .hero-note) */
.hero-note{z-index:2;display:flex;gap:14px;width:280px;position:absolute;top:7vh;right:5vw}
.hero-note .note-line{background:#d9dfc4;flex:none;width:30px;height:1px;margin-top:10px}
.hero-note strong{display:block;font:400 22px/1.15 Georgia,"Times New Roman",serif;color:#fff}
.hero-note p{color:#ffffff9e;margin:7px 0 0;font-size:11px;line-height:1.45}

/* Circular experience badge (model .founded / Groupe .since) */
.founded{z-index:2;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid #ffffff80;border-radius:50%;flex-direction:column;justify-content:center;
  align-items:center;width:124px;height:124px;display:flex;position:absolute;bottom:8vh;right:5vw;
  text-align:center;color:#fff}
.founded span{text-transform:uppercase;letter-spacing:.14em;font-size:8px;opacity:.9}
.founded strong{text-align:center;max-width:94px;margin-top:5px;font:400 17px/1.05 Georgia,"Times New Roman",serif}

.eyebrow,.section-kicker,.gallery-heading{text-transform:uppercase;
  letter-spacing:.22em;font-size:9px;font-weight:700}
.eyebrow{margin:0 0 20px;opacity:.8}
.intro-section > .eyebrow{display:flex;align-items:center;gap:12px;opacity:1}
.intro-section > .eyebrow::before{content:"";background:currentColor;width:28px;height:1px;opacity:.7}

.btn{display:inline-block;text-decoration:none;font-size:13px;font-weight:600;
  padding:14px 26px;border-radius:2px;transition:.18s}
.btn-primary{background:var(--moss);color:#0d1f18}
.btn-primary:hover{background:#93ab47}
/* Hero primary CTA: WHITE + bare ↗ (model .button-light) */
.hero .btn-primary{background:var(--paper,#f7f5ef);color:var(--ink);text-transform:uppercase;
  letter-spacing:.14em;font-size:9px;font-weight:400;min-width:230px;min-height:54px;
  padding:0 20px;display:inline-flex;align-items:center;justify-content:space-between;
  gap:28px;border-radius:0;transition:transform .2s}
.hero .btn-primary:hover{background:#fff;color:var(--ink);transform:translateY(-2px)}
.hero .btn-primary span{font-size:14px;font-weight:400;line-height:1}
.btn-ghost{border:1px solid #ffffff59;color:#fff}
.btn-ghost:hover{background:#ffffff14}
/* Hero secondary: underline text-link + ↓ */
.hero .btn-ghost{border:0;border-bottom:1px solid #ffffff6b;border-radius:0;color:#ffffffdb;
  text-transform:uppercase;letter-spacing:.14em;font-size:9px;font-weight:700;
  padding:0 0 6px;background:transparent;min-height:auto;
  display:inline-flex;align-items:center;gap:14px}
.hero .btn-ghost:hover{background:transparent;opacity:.85}
.hero .btn-ghost span{font-size:12px;font-weight:400}
.hero .eyebrow.light{color:#ffffffc7;opacity:1}
.hero .eyebrow.light::before{content:"";opacity:.75;background:currentColor;
  width:28px;height:1px;margin:0 12px 3px 0;display:inline-block}

section[id]{scroll-margin-top:0}

/* ---------- sections ---------- */
.intro-section,.experience-section{padding:clamp(72px,10vw,128px) 7vw}
.expertise-section{padding:clamp(72px,10vw,122px) 7vw;background:var(--ink);color:#fff}
.section-head{max-width:900px}
.section-head h2{margin:0;font-size:clamp(30px,4.6vw,64px);line-height:1.02}
.section-head p{max-width:660px;margin:22px 0 0;opacity:.78}

/* Cream intro — two columns like model (.intro-main), BELOW hero in flow */
.intro-main{display:grid;grid-template-columns:1.15fr .85fr;gap:10vw;margin-top:54px;align-items:start}
.intro-main h2{margin:0;font-size:clamp(48px,6vw,84px);line-height:.99;
  font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.045em}
.intro-text > p{color:#17352cad;margin:8px 0 0;font-size:15px;line-height:1.85;max-width:none;opacity:1}
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:42px;
  padding-top:26px;border-top:1px solid var(--line)}
.stat-row b{display:block;font:400 47px Georgia,"Times New Roman",serif;color:var(--moss)}
.stat-row span{display:block;margin-top:7px;text-transform:uppercase;letter-spacing:.12em;
  max-width:160px;font-size:9px;opacity:.72}

/* Expertise — model: section-heading + border-grid cards, bare arrows */
.section-kicker{display:flex;align-items:center;text-transform:uppercase;
  letter-spacing:.22em;font-size:9px;font-weight:700;margin:0}
.section-kicker>span{display:block;width:28px;height:1px;margin-right:12px;background:currentColor}
.section-kicker.light{color:#ffffffbf}
.section-kicker.light>span{background:var(--moss)}
.section-heading,.experience-header{display:grid;
  grid-template-columns:.55fr 1.25fr .8fr;align-items:start;gap:5vw;margin-bottom:68px}
.section-heading h2,.experience-header h2{margin:0;font-size:clamp(48px,6vw,84px);
  line-height:.99;font-weight:400;letter-spacing:-.045em;
  font-family:Georgia,"Times New Roman",serif}
.section-heading>p{color:#ffffffa3;margin:8px 0 0;font-size:13px;line-height:1.8}
.experience-header>p{color:#17352ca6;margin:8px 0 0;font-size:13px;line-height:1.8}
.expertise-grid{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid #fff3;border-left:1px solid #fff3}
.expertise-card{border-bottom:1px solid #fff3;border-right:1px solid #fff3;
  min-height:390px;padding:30px;position:relative}
.expertise-card:hover{background:#ffffff0d}
.card-number{display:block;letter-spacing:.16em;color:var(--moss);font-size:9px;
  font-family:Arial,Helvetica,sans-serif;font-weight:400}
.expertise-card h3{margin:95px 0 18px;font-size:31px;line-height:1.05;
  font-weight:400;font-family:Georgia,"Times New Roman",serif;color:#fff}
.expertise-card p{margin:0;color:#ffffffa3;font-size:13px;line-height:1.75;
  font-family:Arial,Helvetica,sans-serif;max-width:92%}
.card-arrow{color:var(--moss);position:absolute;bottom:25px;right:27px;font-size:18px;
  line-height:1;background:none;border:0;border-radius:0;width:auto;height:auto;
  display:inline;padding:0}

/* Approche — model: IMAGE left / TEXT right, sand full-bleed split */
.approach-section{background:var(--sand);display:grid;grid-template-columns:1fr 1fr;
  min-height:840px;padding:0}
.approach-visual{background:#cfd6ca;position:relative;overflow:hidden;min-height:560px}
.approach-visual img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  filter:saturate(.64) sepia(.1);border:0;max-height:none;display:block}
.approach-visual:after{content:"";position:absolute;inset:0;
  background:linear-gradient(#0000 50%,#102a23a3);pointer-events:none}
.visual-caption{z-index:1;color:#fff;text-transform:uppercase;letter-spacing:.16em;
  font-size:8px;position:absolute;bottom:30px;left:36px;margin:0}
.approach-copy{padding:104px 7vw}
.approach-copy h2{margin:42px 0 0;font-size:clamp(48px,6vw,84px);line-height:.99;
  font-weight:400;color:var(--ink);font-family:Georgia,"Times New Roman",serif;
  letter-spacing:-.045em}
.approach-intro{color:#17352cad;margin:28px 0 36px}
.steps{border-top:1px solid var(--line);margin:0;padding:0;list-style:none}
.steps li{border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:52px 1fr;gap:16px;padding:20px 0}
.steps li>span{color:var(--moss);letter-spacing:.15em;padding-top:6px;font-size:9px;
  font-weight:400;font-family:Arial,Helvetica,sans-serif}
.steps h3{margin:0 0 4px;font-size:24px;font-weight:400;color:var(--ink);
  font-family:Georgia,"Times New Roman",serif}
.steps p{color:#17352ca3;margin:0;font-size:12px;line-height:1.65;
  font-family:Arial,Helvetica,sans-serif}

/* Expérience — paper fill (pas blanc) + cartes modèle ChatGPT Sites */
.experience-section{background:var(--paper)}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:0}
/* modèle: pas de background:#fff — le fill paper (#f7f5ef) transparaît */
.project-card{background:transparent;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);min-height:345px;padding:30px}
/* modèle .project-index{font-size:9px} — ink hérité, pas gris atténué */
.project-index{display:block;font-size:9px;letter-spacing:0;
  font-family:Arial,Helvetica,sans-serif;color:var(--ink);font-weight:400}
/* modèle .project-type — moss 9px, sans font-weight:700 */
.project-type{color:var(--moss);text-transform:uppercase;letter-spacing:.13em;
  margin:74px 0 15px;font-size:9px;font-weight:400;
  font-family:Arial,Helvetica,sans-serif}
.project-card h3{margin:0 0 18px;font-size:34px;line-height:1.04;
  font-weight:400;color:var(--ink);font-family:Georgia,"Times New Roman",serif}
.project-text{color:#17352ca3;font-size:13px;line-height:1.75;margin:0;
  font-family:Arial,Helvetica,sans-serif}

/* 1.0.10 — mosaïque gptsite + bandeau plan en arrière-plan */
.gallery-heading{letter-spacing:.2em;margin:82px 0 23px;font-size:9px;font-weight:700}
.gallery-heading>span{background:var(--ink);width:28px;height:1px;margin:0 12px 3px 0;display:inline-block}
.project-gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.gallery-card{background:var(--deep);grid-column:span 6;height:390px;margin:0;position:relative;overflow:hidden}
.gallery-card:nth-child(n+3){grid-column:span 4;height:300px}
.gallery-card img{object-fit:cover;width:100%;height:100%;transition:transform .45s}
.gallery-card:hover img{transform:scale(1.025)}
.gallery-card:after{content:"";background:linear-gradient(#0000 46%,#08231bd1);position:absolute;inset:0}
.gallery-card figcaption{z-index:1;color:#fff;position:absolute;bottom:20px;left:24px;margin:0}
.gallery-card figcaption span{color:#d5dfb4;text-transform:uppercase;letter-spacing:.15em;font-size:8px;display:block}
.gallery-card figcaption strong{font:400 27px Georgia,"Times New Roman",serif;display:block}
.gallery-card:nth-child(4) img{object-position:center 68%}
.experience-band{height:280px;margin-top:78px;position:relative;overflow:hidden}
.experience-band img{object-fit:cover;filter:saturate(.7)brightness(.72);width:100%;height:100%}
.experience-band:after{content:"";background:linear-gradient(90deg,#102a23e0,#102a231f);position:absolute;inset:0}
.experience-band p{z-index:1;color:#fff;margin:0;font:400 clamp(38px,5vw,70px) Georgia,"Times New Roman",serif;
  position:absolute;top:50%;left:50px;transform:translateY(-50%)}

/* ---------- Direction — port modèle futur-planeo-conseil (1.0.11) ---------- */
.direction-section{background:var(--deep);color:#fff;grid-template-columns:1fr 1fr;display:grid;padding:0}
.direction-quote{min-height:720px;position:relative;overflow:hidden}
.direction-quote picture{display:contents}
.direction-quote img{object-fit:cover;object-position:center top;filter:saturate(.8);
  width:100%;height:100%;position:absolute;inset:0;max-width:none;border:0}
.direction-quote:after{content:"";background:linear-gradient(#0000 42%,#102a23e6);position:absolute;inset:0}
.direction-quote blockquote{z-index:1;margin:0;font-size:clamp(30px,3vw,48px);line-height:1.08;
  position:absolute;bottom:48px;left:7vw;right:7vw;color:#fff;font-style:normal;
  font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.045em}
.direction-copy{flex-direction:column;justify-content:center;padding:104px 7vw;display:flex}
.direction-copy h2{margin:42px 0 0;font-size:clamp(48px,6vw,84px);line-height:.99;
  font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.045em;color:#fff}
.direction-copy .role,.role{text-transform:uppercase;letter-spacing:.15em;color:var(--moss)!important;
  font-size:9px!important;font-weight:400;margin:10px 0 0}
.direction-copy>p{color:#ffffffad;font-size:13px;line-height:1.75;margin:18px 0 0}
.direction-creds{flex-wrap:wrap;gap:8px;margin:32px 0 0;padding:0;list-style:none;display:flex}
.direction-creds li{text-transform:uppercase;letter-spacing:.1em;border:1px solid #ffffff38;
  padding:8px 11px;font-size:8px;background:transparent;color:#fff;border-radius:0}

/* ---------- Contact — port modèle (sand + rows + CTA dark above) ---------- */
.contact-section{background:var(--sand);color:var(--ink);grid-template-columns:1.1fr .9fr;
  gap:10vw;padding:128px 7vw;display:grid}
.contact-copy h2{margin:42px 0 27px;font-size:clamp(48px,6vw,84px);line-height:.99;
  font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.045em;color:var(--ink)}
.contact-copy>p{color:#17352cad;margin:0 0 34px;max-width:none}
.contact-cta,.contact-section .btn-primary{background:var(--ink);color:#fff;text-transform:uppercase;
  letter-spacing:.14em;font-size:9px;font-weight:400;min-width:230px;min-height:54px;
  padding:0 20px;display:inline-flex;align-items:center;justify-content:space-between;
  gap:28px;border-radius:0;transition:transform .2s;text-decoration:none}
.contact-cta:hover,.contact-section .btn-primary:hover{background:var(--deep);color:#fff;transform:translateY(-2px)}
.contact-cta span,.contact-section .btn-primary span{font-size:14px;font-weight:400;line-height:1}
.contact-details{border-top:1px solid var(--line);align-self:end;font-style:normal;margin:0;padding:0}
.contact-details>div{border-bottom:1px solid var(--line);grid-template-columns:34px 1fr;gap:18px;
  padding:22px 0;display:grid;align-items:start}
.contact-details span{color:var(--moss);font-size:9px;font-weight:700;letter-spacing:0}
.contact-details p{margin:0;color:var(--ink)}
.contact-details a{text-decoration:none;color:var(--ink)}
.contact-details a:hover{text-decoration:underline}

.site-footer{background:var(--ink);color:#fff;padding:78px 7vw 40px}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.site-footer img{height:34px;width:auto}
.site-footer h2{font-size:8px;letter-spacing:.13em;text-transform:uppercase;margin:0 0 16px;color:#ffffff6b;font-weight:400}
.site-footer ul{list-style:none;margin:0;padding:0;font-size:10px;line-height:1.75;color:#ffffffad}
.site-footer a{text-decoration:none;color:#ffffffad}
.site-footer a:hover{text-decoration:underline}
.footer-bottom{margin-top:56px;padding-top:22px;border-top:1px solid #ffffff24;
  display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;
  font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:#ffffff6b}
.footer-bottom>span:last-child a:first-child{font-size:9px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- responsive — miroir modèle futur-planeo-conseil (900 / 760 / 600) ---------- */
@media (max-width:900px){
  :root{ --header-h:82px; }
  .site-header{grid-template-columns:auto 1fr auto;gap:16px;height:82px;padding:0 24px}
  .main-nav{gap:clamp(12px,2vw,22px)}
  .main-nav a,.header-contact{font-size:8px}
  .brand img{height:64px}
  .header-actions{gap:12px}
  .mobile-nav{display:none}
  .hero{height:calc(100svh - 82px);min-height:690px;max-height:none}
  .hero-copy{padding:0 32px 62px}
  .hero-note{display:none} /* modèle ≤900 : vision masquée */
  .founded{width:96px;height:96px;bottom:48px;right:32px}
  .founded strong{font-size:15px;max-width:72px}
  /* modèle ≤900 : footer centré (logo, joindre, copyright/liens) */
  .site-footer{text-align:center;padding:50px 24px 40px}
  .footer-grid{grid-template-columns:1fr;gap:44px;justify-items:center}
  .site-footer img{margin-inline:auto}
  .footer-bottom{justify-content:center;flex-direction:column;align-items:center;gap:12px;text-align:center}
  .approach-section,.direction-section{grid-template-columns:1fr}
  .contact-section{grid-template-columns:1fr;gap:68px}
  .approach-section{min-height:0}
  .approach-visual{min-height:560px}
  .approach-copy{padding:78px 7vw}
  .section-heading,.experience-header,.intro-main{grid-template-columns:1fr;gap:34px;margin-bottom:44px}
  .expertise-grid{grid-template-columns:1fr 1fr}
  .project-grid{grid-template-columns:1fr}
  .project-card{border-right:0}
  .gallery-card,.gallery-card:nth-child(n+3){grid-column:span 6;height:320px}
}
@media (max-width:760px){
  .site-header{grid-template-columns:1fr auto auto}
  .main-nav{display:none} /* modèle: desktop-nav off → hamburger */
  .mobile-nav{display:block;position:relative}
  .mobile-nav summary{place-content:center;gap:7px;width:44px;height:44px;list-style:none;display:grid;cursor:pointer}
  .mobile-nav summary::-webkit-details-marker{display:none}
  .mobile-nav summary span{background:var(--ink);width:22px;height:1px;display:block}
  .mobile-nav > div{background:var(--paper);border:1px solid var(--line);flex-direction:column;gap:18px;
    width:min(360px,100vw);padding:28px;display:flex;position:absolute;top:52px;right:-24px;z-index:30}
  .mobile-nav > div a{text-decoration:none;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--ink)}
  .stat-row{grid-template-columns:1fr;gap:22px}
}
@media (max-width:600px){
  .brand img{height:60px}
  .header-contact{display:none} /* modèle ≤600 */
  .founded{display:none} /* modèle ≤600 : pastille masquée */
  .hero{min-height:680px}
  .hero-background{object-position:62% center}
  .hero-copy{padding:0 24px 52px}
  .hero h1{font-size:clamp(48px,14vw,68px)}
  .hero-lede{max-width:92%;font-size:14px}
  .hero-actions{flex-direction:column;align-items:flex-start;gap:22px} /* modèle: CTAs empilés ≤600 */
  .hero .btn-primary{min-width:0;width:auto}
  .expertise-grid,.project-grid{grid-template-columns:1fr}
  .expertise-card{min-height:0}
  .expertise-card h3{margin-top:48px}
  .approach-visual{min-height:420px}
  .approach-copy{padding:78px 24px}
  .section-heading h2,.experience-header h2,.approach-copy h2,.intro-main h2{font-size:44px}
  .expertise-section,.experience-section,.intro-section,.contact-section{padding:82px 24px}
  .approach-copy,.direction-copy{padding:78px 24px}
  .direction-copy h2,.contact-copy h2{font-size:44px}
  .direction-quote{min-height:560px}
  .direction-quote blockquote{font-size:31px;bottom:30px;left:24px;right:24px}
  .gallery-card,.gallery-card:nth-child(n+3){grid-column:span 12;height:285px}
  .experience-band{height:220px}
  .experience-band p{left:24px}
}
@media (min-aspect-ratio:2/1){ .hero-background{object-position:50% 60%} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* ==================================================================
   CONTRAT D'ALIGNEMENT DES HÉROS — 2026-09-03
   Aligne Planéo Conseil sur les trois autres sites : en passant d'un
   site à l'autre, l'entête, le texte de surtitre et le bas du héros
   tombent au même endroit. Mêmes variables, mêmes valeurs.
   Ici le conteneur s'appelle .hero-copy (comme sur Groupe Planéo).
   ================================================================== */
:root{
  --pl-header-h:88px;      /* hauteur d'entête, déjà commune */
  --pl-pad-x:5vw;          /* marge latérale du contenu */
  /* 2026-09-08 : 190px → 120px. À 190px, sur une fenêtre courte (héros d'environ
     610px), le contenu débordait : le CTA collait au bas de l'image sur Wakefield
     et le titre était coupé sur Planéo Conseil. Valeur IDENTIQUE sur les 4 sites —
     c'est ce qui garde les quatre surtitres à la même hauteur. */
  --pl-hero-top:40px;     /* du haut du héros au surtitre */
  --pl-corner-bottom:42px; /* pastille / bande, distance au bas */
}

.hero{ align-items:flex-start; align-content:start; }
.hero > .hero-copy{
  padding-top:var(--pl-hero-top);
  padding-left:var(--pl-pad-x);
  padding-right:var(--pl-pad-x);
  padding-bottom:0;
  transform:none;
}
@media (max-width:760px){ :root{ --pl-hero-top:130px; } }

/* ==================================================================
   2026-09-09 — fidélité typo / pli (Planéo Conseil seulement)
   Ancrage BAS du modèle (pli jusqu'au CTA). 1.0.4 : h1 clamp réduit
   graduellement + min(vw,svh) pour fenêtres larges/basses (clip top).
   Georgia / <em> / Wakefield / Lac Bernard inchangés.
   ================================================================== */
.hero h1{font-size:clamp(62px,8vw,126px);line-height:.91}
.hero{
  align-items:flex-end;
  align-content:flex-end;
}
.hero > .hero-copy{
  padding-top:0;
  padding-left:var(--pl-pad-x, 5vw);
  padding-right:var(--pl-pad-x, 5vw);
  padding-bottom:clamp(36px, 7vh, 72px);
  transform:none;
}
@media (max-width:760px){
  .hero > .hero-copy{ padding-bottom:52px; }
}

/* ==================================================================
   2026-09-09 / 1.0.5 — réaligne héros + intro sur le modèle ChatGPT Sites
   Vision top-right (.hero-note), CTA blanc, pastille circulaire (.founded),
   section crème en flux normal sous le héros (pas de barre bas).
   Clamp h1 1.0.4 conservé : clamp(54px,min(6.8vw,14svh),112px).
   ================================================================== */

/* ==================================================================
   2026-09-09 / 1.0.6 — Expertise + Approche + Expérience → modèle ChatGPT Sites
   Expertise: section-heading, border dividers (pas de boîtes gap), nums moss,
   titres serif, flèches nues. Approche: image G / texte D, sand full-bleed,
   steps olive + serif. Expérience: header 3-col, cartes blanches index/tag.
   Héros 1.0.5 inchangé.
   ================================================================== */

/* ==================================================================
   2026-09-09 / 1.0.7 — héros grand viewport + entête modèle
   Nav 4 liens uppercase + NOUS JOINDRE encadré à droite (FR/EN).
   H1 + <br><em>, clamp min(vw,svh) plus proche modèle, CTA ↗ / lien ↓,
   vision 280px fixe, eyebrow avec tiret. Sections 1.0.6 conservées.
   ================================================================== */

/* ==================================================================
   2026-09-09 / 1.0.8 — NOUS JOINDRE souligné (modèle) + polices
   .header-contact: border-bottom 1px solid var(--ink); padding 12px 0 8px
   (plus de boîte). Nav sans font-weight:700. body sans font-size:17
   (modèle: Arial + line-height 1.65). h1–h3(+blockquote): Georgia.
   ================================================================== */

/* ==================================================================
   2026-09-09 / 1.0.9 — Expérience cartes + hero responsive modèle
   Cartes: fill paper (plus de #fff), index ink 9px, tags moss 9px
   sans 700, titres 34px. NOUS JOINDRE: border-width 0 0 1px 0 renforcé.
   Breakpoints modèle: ≤900 vision off / founded↓ ; ≤760 hamburger ;
   ≤600 contact+founded off, CTAs colonne, h1 clamp.
   ================================================================== */

/* ==================================================================
   2026-09-09 / 1.0.11 — Contact + Direction + header non-sticky
   2026-09-09 / 1.0.12 — Footer centré ≤900px (miroir modèle gptsite)
   2026-09-09 / 1.0.13 — Port typos gptsite (index-DmjXuAps.css)
   Hero H1 62–126 + min(vw,svh); eyebrow light #ffffffc7; CTA primary
   sans fw:700; H2 sections clamp(48px,6vw,84px); stats 47px fixe;
   expertise h3 31px; nums/role sans 700; approach/contact lead color;
   band sans /1.05 ni tracking; nav sans opacity:.88; footer micro-caps.
   Conserve: Contact cream, Direction full-bleed, header non-sticky,
   footer ≤900 centré.
   ================================================================== */

/* ==================================================================
   C-FIX — 2026-09-10 · commentaire nº 3 de Jean-François
   « le slogan « Des projets complexes, pensés à l'échelle du territoire. »
     devrait toujours être positionné sous le titre « Expérience sélectionnée »,
     peu importe la grandeur de l'écran. »

   ⚠️ PREMIÈRE VERSION FAUSSE, corrigée le même jour. J'avais lu « titre » = le
   <h2> et « slogan » = le <p>, et déplacé le <p> sous le <h2>. Or dans ce
   balisage :
       .section-kicker  = « Expérience sélectionnée »   ← le TITRE selon JF
       h2               = « Des projets complexes… »    ← le SLOGAN selon JF
       p                = le paragraphe descriptif
   Le kicker et le h2 restaient donc côte à côte au-dessus de 900px —
   exactement ce que JF signalait. Vérifié : à 1400px, kickerH2CôteÀCôte=true.

   CORRECTIF : la grille passe à UNE colonne à TOUTES les largeurs. L'ordre
   du DOM (kicker → h2 → p) devient l'ordre visuel, partout.
   Vérifié après correctif à 1400px ET 800px, sur .experience-header ET
   .section-heading : h2 sous le kicker, p sous le h2.
   ================================================================== */
.section-heading,
.experience-header{
  grid-template-columns:1fr;
  gap:0;
}
.section-heading > .section-kicker,
.experience-header > .section-kicker,
.section-heading > h2,
.experience-header > h2,
.section-heading > p,
.experience-header > p{
  grid-column:1;
  grid-row:auto;
}
.section-heading > h2,
.experience-header > h2{ margin-top:18px; max-width:20ch; }
.section-heading > p,
.experience-header > p{ margin-top:22px; max-width:56ch; }


/* ==================================================================
   L2-FIX — 2026-09-10 · commentaire de Jean-François
   « le texte apparaît en haut de l'image [sur le Lac], alors que, pour les
     autres sites, le texte apparaît en bas. Par souci de cohérence… »
   + titre COUPÉ par le haut sur petit téléphone (signalé par Patrick).

   UN SEUL DÉFAUT, DEUX SYMPTÔMES. Mesure de l'ancrage à 390×844 :
     Lac Bernard   align-items:flex-start  padding-top:130px  → en HAUT
     Wakefield     align-items:flex-start  padding-top:130px  → en HAUT
     Groupe Planéo align-items:flex-end    padding-top:0      → en BAS
     Planéo Conseil align-items:flex-end   padding-top:0      → en BAS
   Le contrat d'alignement ne s'appliquait qu'au DESKTOP. Sur mobile, deux
   sites sur quatre étaient restés ancrés en bas — c'est exactement ce que
   JF décrit.

   Et comme le héros a overflow:hidden, un contenu ancré en BAS qui dépasse
   se fait couper PAR LE HAUT. Mesuré sur Groupe à 375×667 : contenu 596px
   dans un héros de 595px — le titre commençait à disparaître.

   DÉCISION DE PATRICK (option A) : aligner les quatre en HAUT plutôt qu'en
   bas. C'est l'inverse de la lettre de la demande de JF, mais c'est le sens
   qui donne la cohérence qu'il réclame SANS réintroduire la coupure —
   l'ancrage bas est précisément ce qui coupait le titre.
   Le héros s'étire désormais au lieu de couper (même patron que W-FIX/L1-FIX).
   ================================================================== */
@media (max-width:760px){
  .hero{ align-items:flex-start; height:auto;
         min-height:max(690px, calc(100svh - 82px)); max-height:none; }
  .hero > .hero-copy{ padding-top:130px; padding-bottom:60px; }
}


/* ==================================================================
   C2-FIX — 2026-09-11 · même défaut que G3-FIX, préventif

   MESURE (CDP, live) à 1440x660 : coupeEnHaut = -1px. Le titre est à UN
   pixel de se faire trancher ; toute fenêtre un peu plus courte coupe.
   Même cause (height figée + flex-end + overflow:hidden), même correctif.
   ================================================================== */
@media (min-width:761px){
  .hero{ height:auto; min-height:clamp(560px, calc(100svh - var(--header-h)), 1200px); }
  /* 11 sept. — Conseil restait ancré EN BAS sur desktop : une règle plus tardive
     écrasait le `align-items:flex-start` du contrat. Résultat mesuré : surtitre à
     32px au lieu de 40. On force l'ancrage haut comme les trois autres. */
  .hero{ align-items:flex-start; }
  .hero > .hero-copy{ padding-top:var(--pl-hero-top, 40px); padding-bottom:clamp(36px, 8vh, 72px); }
  /* 11 sept. — titre d'un cran, aligné sur les trois autres. */
  .hero h1{ font-size:clamp(58px, 7.4vw, 112px); }
}