/* V6 — keep Dany's compositions; give imagery and typography room to breathe. */

/* POINTS DE RUPTURE — lire avant d'en ajouter un.
   Un téléphone couché mesure environ 850x390 : trop large pour un point de
   rupture en largeur seule, il basculait donc sur la mise en page bureau, avec
   la barre de navigation complète posée par-dessus le titre de la bannière.
   « Téléphone » se définit ici par la HAUTEUR, la seule mesure qui ne change
   pas quand on tourne l'appareil : au plus 480 px de haut en paysage. Aucune
   tablette ni aucun portable n'y entre — un iPad couché fait 744 px de haut,
   un portable 1366x768 en fait plus de 600.
   Les trois feuilles suivent la même convention, sinon les deux mises en page
   se superposent :
     mobile     → @media(max-width:760px),(max-height:480px) and (orientation:landscape)
     pas mobile → les requêtes en MIN-width portent « and (min-height:481px) ».
   Les requêtes en max-width (900, 1000, 1100 px) n'y touchent pas, et c'est
   volontaire : elles forment une cascade dont le bloc mobile est la dernière
   marche. C'est celle de 900 px, par exemple, qui empile la carte de « Nos
   marques » ; le bloc mobile se contente ensuite d'en ajuster les marges. Un
   téléphone couché fait 851 px de large, il est donc réellement plus étroit que
   ces seuils et doit les recevoir. Les avoir exclus une première fois laissait
   la carte en deux colonnes avec un grand vide à droite. */
:root{--gutter:clamp(24px,4vw,60px);--section-space:clamp(44px,5.2vw,76px);--ease:cubic-bezier(.22,1,.36,1)}
body{padding:0 20px}header{position:sticky;top:0;z-index:20;padding:18px var(--gutter);min-height:88px;background:rgba(255,255,255,.97);transition:box-shadow .25s}header.is-scrolled{box-shadow:0 1px 0 #14151216,0 8px 24px #14151208}.logo{flex-shrink:0}.logo img{display:block;width:132px;height:45px;object-fit:contain}header nav{gap:clamp(14px,1.8vw,28px);font-size:12px}header nav>a:not(.button){position:relative;padding:12px 0}header nav>a:not(.button):after{content:'';position:absolute;left:0;right:0;bottom:5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s}header nav>a:hover:after,header nav>a[aria-current=page]:after{transform:scaleX(1)}
h1,h2,h3{text-wrap:balance}p{line-height:1.55}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #8c7652;outline-offset:5px}.button,.button.light{min-height:46px;padding:12px 20px;line-height:1.4;transition:background .22s,color .22s,border-color .22s;gap:20px}.button span{transition:transform .25s var(--ease)}.button:hover span{transform:translate(3px,-3px)}.text-link{text-underline-offset:6px;text-decoration-thickness:1px}.eyebrow{line-height:1.7;letter-spacing:1.7px}.section{padding:var(--section-space) var(--gutter)}.section-heading{align-items:center;gap:32px;margin-bottom:28px}.section-heading .button{flex-shrink:0}.section-heading p{max-width:580px}.section h2{line-height:1.08}.hero-copy{padding:54px var(--gutter)}.hero-copy>p{line-height:1.5}.hero-immersive{min-height:600px}.hero-immersive .hero-copy{padding:48px 0 50px var(--gutter);width:51%}.hero-immersive h1{font-size:clamp(44px,4.6vw,66px);line-height:1.04}.hero-immersive .hero-copy>p{font-size:15px;line-height:1.6;max-width:390px;margin-bottom:28px}.hero-immersive .hero-image{width:63%}.hero-immersive .hero-image>img{object-position:center 35%}.hero-immersive .hero-image:after{background:linear-gradient(90deg,#141611,rgba(20,22,17,.25) 30%,transparent 60%)}
.people-editorial{padding:48px var(--gutter);grid-template-columns:minmax(220px,1fr) minmax(0,2.25fr);gap:40px;align-items:center}.people-editorial h2{font-size:32px;line-height:1.08}.people-editorial p{font-size:17px;line-height:1.5}.people-editorial .portraits{align-self:center;gap:14px;align-items:start;grid-template-rows:auto auto}.portraits img{display:block;min-height:0;max-height:none;width:100%;height:auto;aspect-ratio:136/137;object-fit:contain;background:#ebe6da}.portrait-caption{margin:0;font-size:10px;letter-spacing:.02em}.people-note{padding-top:28px}.science{grid-template-columns:1fr 1.12fr;min-height:430px}.science>div{padding:48px var(--gutter);align-self:center}.science h2{line-height:1.05}.science p{line-height:1.6;margin-bottom:28px}.science img{height:100%;min-height:430px;max-height:none;object-position:center}.brands-section{border-bottom:1px solid var(--line)}.brands{gap:32px;margin-top:36px}.brand,.brand+.brand,.brand.bleuh,.brand.mdh{display:grid;grid-template-columns:1fr;align-content:start;gap:18px;padding:24px 45% 28px 0;min-height:360px;border:0;border-top:1px solid #ccc6b8}.brand+.brand{padding-left:0}.brand .eyebrow{margin:0;min-height:28px;font-size:11px}.brand>img.brand-logo{width:100%;max-width:220px;height:65px;object-fit:contain;object-position:left center;margin:0;filter:none}.brand.bleuh>img.brand-logo{filter:none;max-width:160px}.brand p{margin:0;line-height:1.5;font-size:17px}.brand .button{justify-self:start;align-self:end;font-size:11px;min-height:44px;padding:10px 12px;gap:12px}.brand .brand-product{width:39%;height:calc(100% - 48px);top:24px;object-fit:cover}.concept-caption{width:39%;bottom:24px;font-size:11px;padding:6px}.about-editorial figure img{height:auto;aspect-ratio:1.94;object-fit:cover}.about-editorial{align-items:center}.split{gap:6%}.split p{font-size:19px;line-height:1.55}.split figcaption{margin-top:14px}.model{border-top:1px solid var(--line)}.steps{margin-top:40px}.steps li{position:relative;padding:12px 22px}.steps h3{line-height:1.15;min-height:48px;font-size:21px}.steps p{line-height:1.5}.steps .line-icon{margin-bottom:22px}.steps .number{color:#75684f}.manifesto{margin:0;min-height:480px;padding-right:49%;border-top:1px solid var(--line)}.manifesto .value-words{gap:14px 24px;margin:32px 0}.manifesto>img{width:43%;object-position:center 22%}.career-cta{padding:var(--section-space) var(--gutter) var(--section-space) 45%;display:block;min-height:350px}.career-cta>img{width:39%}.career-cta h2{font-size:36px;max-width:520px}.career-cta p{font-size:18px;max-width:560px;margin:24px 0}.value-grid{gap:28px}.value-grid article{overflow:hidden}.value-grid article>p{line-height:1.6}.story-copy{padding:32px}.story-copy h3{line-height:1.12}.story-copy p{line-height:1.55}.story-filters{margin-top:28px}.story-filters button{transition:background .2s,color .2s}.story-filters button:hover{background:#e8e2d6}.story-filters button[aria-pressed=true]{background:var(--ink)}footer{padding:48px var(--gutter) 24px}.footer-top img{filter:brightness(0) invert(1);width:320px;max-width:100%;height:auto;object-fit:contain}.footer-links{gap:10px;font-size:12px}.footer-top p{font-size:16px}.footer-bottom{padding-top:22px;font-size:11px}.site-form input:focus,.site-form textarea:focus{border-color:#766b53}.form-section{border-top:1px solid var(--line)}
@media(min-width:761px) and (max-width:1100px) and (min-height:481px){header{padding:16px 24px;gap:20px}header nav,html[lang=es] nav{gap:12px;font-size:11px}.logo img{width:108px;height:38px}.hero-immersive{min-height:550px}.people-editorial{grid-template-columns:1fr 1.8fr;gap:26px}.people-editorial .portraits{grid-template-columns:repeat(2,minmax(0,1fr));max-width:400px;margin-left:auto}.people-editorial h2{font-size:30px}.brand,.brand+.brand,.brand.bleuh,.brand.mdh{padding-right:0;padding-bottom:270px}.brand .brand-product{top:auto;bottom:30px;width:100%;height:220px;object-fit:contain}.concept-caption{width:100%;bottom:0}.steps li{padding:12px}.steps h3{font-size:18px}.science>div{padding:40px 30px}}
@media(max-width:760px),(max-height:480px) and (orientation:landscape){body{padding:0 10px}header{padding:14px 20px;min-height:76px}.logo img{width:115px;height:39px}header nav,html[lang=es] nav{max-height:calc(100dvh - 76px);overflow:auto;font-size:16px;padding:24px;gap:8px}.hero-immersive{min-height:0}.hero-immersive .hero-copy{width:100%;padding:36px 24px}.hero-immersive h1,html[lang=es] .hero-immersive h1{font-size:clamp(36px,9.8vw,58px)}.hero-immersive .hero-copy>p{font-size:15px}.hero-immersive .hero-image{width:100%;height:360px}.hero-immersive .hero-image:after{background:linear-gradient(180deg,#141611,transparent 25%)}.hero-copy,html[lang=es] .hero-copy{padding:36px 24px}.people-editorial{padding:40px 24px;display:block}.people-editorial .portraits{margin-top:28px;gap:14px}.portraits img{height:auto;min-height:0;max-height:none}.people-editorial h2{font-size:32px}.people-editorial p{font-size:18px}.science{display:grid;grid-template-columns:1fr;min-height:0}.science>div{padding:40px 24px}.science img{height:300px;min-height:0}.section-heading .button{margin-top:20px}.brands{gap:32px}.brand,.brand+.brand,.brand.bleuh,.brand.mdh{padding:24px 43% 28px 0;min-height:370px;gap:18px}.brand p{font-size:16px}.brand .brand-product{width:38%;height:calc(100% - 48px);top:24px;bottom:auto;object-fit:cover}.brand>img.brand-logo{height:52px}.brand .button{font-size:11px;gap:8px;padding:10px}.concept-caption{width:38%;bottom:24px}.brand .eyebrow{font-size:8px;letter-spacing:1px}.split{gap:28px}.about-editorial figure img{height:auto}.steps li,.steps li:first-child,.steps li:last-child{padding:24px 0}.steps h3{min-height:0;font-size:23px}.steps .line-icon{margin:0}/* La photo des valeurs passe AU-DESSUS du texte au lieu de le suivre. En bas, elle touchait celle de l'appel Carriere qui est ancree en haut de SA bande : deux photos separees par un simple filet, lues comme un seul bloc casse. Signale le 10/09. Les deux gardent maintenant la meme regle - photo d'abord, texte ensuite - et le texte des valeurs les separe. *//* Le creux se calcule : hauteur de la photo + la respiration de la bande, pas un nombre rond ecrit a la main. Les deux bandes tombaient a 30 et 40 px sous leur bouton la ou toutes les autres sections en ont 48 - signale le 11/09, « les autres sections en ont, pourquoi pas la ». */.manifesto{padding:calc(270px + var(--section-space)) 24px var(--section-space)}.manifesto>img{inset:0 0 auto;height:270px;width:100%}.career-cta{padding:calc(220px + var(--section-space)) 24px var(--section-space)}.career-cta>img{width:100%;height:220px}.career-cta h2{font-size:32px}.career-cta p{margin:20px 0}.footer-top img{width:150px}.footer-top>div+div{padding-left:20px}.footer-top>div:last-child{padding-left:0}.footer-bottom{font-size:10px}.value-grid article>h2{font-size:29px}.story-copy{padding:24px}}
/* Progressive enhancement: content stays visible without JavaScript. */
@media(prefers-reduced-motion:no-preference){.reveal-ready{opacity:0;transform:translateY(18px);transition:opacity .65s var(--ease),transform .65s var(--ease);transition-delay:var(--reveal-delay,0ms)}.reveal-ready.is-visible,.reveal-ready:focus-within{opacity:1;transform:none}.hero-copy{animation:opening .75s var(--ease) both}@keyframes opening{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal-ready{opacity:1;transform:none}}
/* Original Volcano photographs: preserve their complete vertical composition. */
.volcano-portraits img{aspect-ratio:2/3;height:auto;object-fit:contain;background:#ead4cf}
.people-editorial .volcano-portraits figure{margin:0;min-width:0}
.people-editorial .volcano-portraits figure img{display:block;width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:2/3;object-fit:contain}
.people-editorial .volcano-portraits figcaption{margin:0;padding:12px 0 0;font:500 12px/1.4 Inter,Arial,sans-serif;letter-spacing:0;color:var(--ink)}
/* Published employee stories: original imagery, readable editorial cards. */
.story-themes.with-people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 28px;margin-top:32px}
.with-people article{display:flex;flex-direction:column;background:var(--ivory);border:1px solid var(--line)}
.with-people article[hidden]{display:none}
.with-people .employee-image-link{display:block;background:#e8e1d2;overflow:hidden}
.with-people .employee-image-link img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;margin:0}
.with-people .story-copy{display:flex;flex:1;flex-direction:column;padding:24px}
.with-people .story-copy .eyebrow{margin-bottom:10px}
.with-people .story-copy time{font-size:11px;color:var(--muted)}
.with-people .story-copy h3{font-size:28px;line-height:1.12;margin:18px 0 12px;overflow-wrap:anywhere}
.with-people .story-copy p{font-size:18px;line-height:1.45;margin:0 0 22px}
.with-people .story-copy .text-link{margin-top:auto;align-self:start;padding:8px 0;font-size:12px}
.with-people a:focus-visible{outline-offset:-3px}
.with-people h3 a:hover,.volcano-portraits figcaption a:hover{text-decoration:underline;text-underline-offset:4px}
.employee-article{padding:36px var(--gutter) 64px;background:var(--ivory)}
.employee-article>.text-link{margin:0 0 36px;display:inline-block}
.employee-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center}
.employee-layout figure{margin:0;min-width:0}
.employee-layout figure>img{display:block;width:100%;height:auto;max-height:660px;object-fit:contain;object-position:center;background:#e8e1d2}
.employee-layout figcaption{font:11px/1.6 Inter,Arial,sans-serif;margin:14px 0;color:var(--muted)}
.employee-copy{min-width:0}.employee-copy h1{font-size:clamp(38px,4.8vw,64px);margin:0 0 24px;overflow-wrap:anywhere}
.employee-copy h2{font-size:clamp(24px,2.5vw,34px);line-height:1.15;margin:0 0 24px}
.employee-copy p{font-size:21px;line-height:1.65;margin:0 0 32px;max-width:600px}
.employee-copy .button{font-size:12px;max-width:100%}.employee-copy .button span{flex-shrink:0}
.employee-more{border-top:1px solid var(--line);margin-top:56px;padding-top:36px;display:flex;align-items:center;justify-content:space-between;gap:24px}.employee-more h2{font-size:30px}
.people-editorial .published-portraits figure img{aspect-ratio:4/5}
.volcano-portraits figure>a{display:block}.volcano-portraits figure>a:focus-visible{outline-offset:4px}
@media(max-width:1100px){.story-themes.with-people{grid-template-columns:repeat(2,minmax(0,1fr))}.employee-copy p{font-size:19px}.employee-layout{gap:32px}}
@media(max-width:760px),(max-height:480px) and (orientation:landscape){.story-themes.with-people{grid-template-columns:1fr;gap:28px}.with-people .story-copy h3{font-size:30px}.employee-article{padding:24px 24px 40px}.employee-layout{display:flex;flex-direction:column;gap:24px;align-items:stretch}.employee-copy h1{font-size:40px}.employee-copy h2{font-size:29px}.employee-copy p{font-size:19px}.employee-copy .eyebrow{margin-bottom:16px}.employee-layout figure>img{max-height:540px}.employee-more{display:block;margin-top:40px}.employee-more h2{margin-bottom:24px}}
.brand h3.eyebrow{margin:8px 0 0}

/* V8 — rythme d'espacement unifié et cartes de marques réellement responsives. */
body{max-width:none;margin:0;padding:0}
header,.section,.people-editorial,.science>div,.hero-copy,footer{padding-left:var(--gutter);padding-right:var(--gutter)}

/* Les deux cartes doivent partager les mêmes repères malgré des textes de
   longueurs différentes. Le flex rend enfin le margin-top:auto du CTA utile. */
.brand,.brand+.brand,.brand.bleuh,.brand.mdh{display:flex;flex-direction:column;align-items:flex-start}
.brand>.eyebrow:first-child{min-height:36px}
/* Ticket bl3Kp60ONUvjpFddk8sw : le `align-self:end` du bloc V6 datait de l'époque
   où .brand était une grille — il y collait le CTA en bas de carte. Depuis le
   passage en flex colonne juste au-dessus, align-self porte sur l'axe transversal,
   c'est-à-dire l'horizontale : il poussait le CTA contre le bord droit de la
   colonne de texte. Comme les deux libellés n'ont pas la même largeur, les deux
   boutons ne commençaient pas au même endroit — d'où « drôlement positionnés et
   pas alignés ». On les ramène sur la marge gauche, avec l'eyebrow et le logo. */
.brand .button{margin-top:auto;align-self:flex-start}

@media(max-width:760px),(max-height:480px) and (orientation:landscape){
  :root{--gutter:24px;--section-space:48px}
  header{padding-left:var(--gutter);padding-right:var(--gutter)}
  .section,.people-editorial,.science>div,.hero-copy,html[lang=es] .hero-copy,footer{padding-left:var(--gutter);padding-right:var(--gutter)}
  .brands{gap:40px}
  .brand,.brand+.brand,.brand.bleuh,.brand.mdh{min-height:0;padding:24px 0 0;gap:18px}
  .brand>.eyebrow:first-child{min-height:0}
  .brand .brand-product{position:static;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;margin-top:8px}
  .concept-caption{position:relative;right:auto;bottom:auto;width:100%;margin-top:-36px;align-self:stretch}
  .brand .button{margin-top:4px}
}

/* V9 — direction Daphnée : pleine largeur, alternance de fonds volontaire et
   compositions éditoriales qui ne dépendent plus de la longueur des textes. */
:root{--page-white:#fff;--page-ivory:#f3efe5}
body,main{width:100%;max-width:none;background:var(--page-white)}
.hero-copy{animation:none!important}
.section{background:var(--page-white)}
.section.ivory,.brands-section{background:var(--page-ivory)}
/* Ticket Daphnée 9UHwyVEcGebvHmSKYi9D : « Qui nous sommes » et « Notre modèle
   intégré » se suivaient sur le même fond blanc avec la même composition ;
   le passage à un autre sujet ne se lisait pas. Le modèle passe sur ivoire
   (la page alterne à nouveau blanc / ivoire) et son titre respire du texte. */
.model{background:var(--page-ivory);border-top:0}
.model .section-heading p{margin-top:18px}

/* Les deux cartes d'accueil restent strictement dans les gouttières de la
   section, même lorsque leur libellé est long. */
.brands-section .brands{grid-template-columns:repeat(2,minmax(0,1fr))}
.brands-section .brand{min-width:0;min-height:300px}
.brands-section .brand .button{margin-top:8px}

/* Sur l'accueil, le menu fait partie du hero. Il redevient opaque au défilement. */
@media(min-width:761px) and (min-height:481px){
  body[data-page="home"] header{position:fixed;inset:0 0 auto;z-index:30;color:#fff;background:linear-gradient(180deg,rgba(16,18,14,.82),rgba(16,18,14,.48) 65%,transparent);border:0}
  body[data-page="home"] header nav{background:transparent}
  body[data-page="home"] header .logo img{filter:brightness(0) invert(1)}
  body[data-page="home"] header nav .button{color:#fff;border-color:#ffffffb8}
  body[data-page="home"] header .language-switch{border-color:#ffffff66}
  body[data-page="home"] header.is-scrolled{color:var(--ink);background:rgba(255,255,255,.97);box-shadow:0 1px 0 #14151216,0 8px 24px #14151208}
  body[data-page="home"] header.is-scrolled .logo img{filter:none}
  body[data-page="home"] header.is-scrolled nav .button{color:var(--ink);border-color:#777}
  body[data-page="home"] header.is-scrolled .language-switch{border-color:var(--line)}
  body[data-page="home"] .hero-immersive{min-height:min(780px,100vh)}
  body[data-page="home"] .hero-immersive .hero-copy{padding-top:150px;padding-bottom:86px}
}

/* Page Nos marques : une marque par rangée. La lecture conserve une largeur
   confortable et les visuels demandés occupent un espace net, sans faux vide. */
body[data-page="nos-marques"] main>.section:not(.ivory){padding-top:clamp(56px,6vw,96px);padding-bottom:clamp(56px,6vw,96px)}
body[data-page="nos-marques"] .brands{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px);margin-top:40px}
body[data-page="nos-marques"] .brand,
body[data-page="nos-marques"] .brand+.brand,
body[data-page="nos-marques"] .brand.bleuh,
body[data-page="nos-marques"] .brand.mdh{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);min-height:0;padding:0;gap:0;border:1px solid var(--line);align-items:stretch;background:var(--page-ivory);overflow:hidden}
body[data-page="nos-marques"] .brand.bleuh{grid-template-columns:minmax(360px,.95fr) minmax(0,1.05fr);background:#e8edf4}
body[data-page="nos-marques"] .brand-content{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:clamp(34px,4.5vw,72px)}
body[data-page="nos-marques"] .brand.bleuh .brand-content{grid-column:2;grid-row:1}
body[data-page="nos-marques"] .brand .brand-product{position:relative;inset:auto;width:100%;height:100%;min-height:620px;margin:0;object-fit:cover}
body[data-page="nos-marques"] .brand.bleuh .brand-product{grid-column:1;grid-row:1}
body[data-page="nos-marques"] .brand .brand-logo{margin:0 0 8px;height:76px}
body[data-page="nos-marques"] .brand-content>.eyebrow:first-child{min-height:0}
body[data-page="nos-marques"] .brand-content p{max-width:650px;font-size:17px;line-height:1.55}
body[data-page="nos-marques"] .brand-content .button{margin-top:10px}
body[data-page="nos-marques"] .concept-caption{position:absolute;right:16px;bottom:14px;width:auto;margin:0;padding:7px 10px;background:#ffffffe6}

/* Carrière : le texte et les portraits forment désormais un seul message de
   recrutement; aucune colonne intermédiaire vide. */
body[data-page="carriere"] .people-editorial{grid-template-columns:minmax(260px,.72fr) minmax(0,1.65fr);gap:clamp(38px,6vw,96px);padding-top:clamp(58px,6vw,96px);padding-bottom:clamp(58px,6vw,96px)}
body[data-page="carriere"] .people-editorial>.people-note{display:none}
body[data-page="carriere"] .people-editorial .portraits{margin:0}

@media(max-width:900px){
  body[data-page="nos-marques"] .brand,
  body[data-page="nos-marques"] .brand+.brand,
  body[data-page="nos-marques"] .brand.bleuh,
  body[data-page="nos-marques"] .brand.mdh{grid-template-columns:1fr}
  body[data-page="nos-marques"] .brand.bleuh .brand-content,
  body[data-page="nos-marques"] .brand.bleuh .brand-product{grid-column:1;grid-row:auto}
  body[data-page="nos-marques"] .brand.bleuh .brand-product{grid-row:1}
  body[data-page="nos-marques"] .brand .brand-product{height:auto;min-height:0;aspect-ratio:4/3}
}

@media(max-width:760px),(max-height:480px) and (orientation:landscape){
  body[data-page="home"] header{position:sticky}
  body[data-page="nos-marques"] .brand-content{padding:30px 24px}
  body[data-page="nos-marques"] .brand .brand-product{aspect-ratio:1/1}
  body[data-page="nos-marques"] .brand-content p{font-size:16px}
  body[data-page="carriere"] .people-editorial{display:block;padding-top:48px;padding-bottom:48px}
  .brands-section .brands{grid-template-columns:1fr}
}

/* Retours Dany 2026-09-10 — portraits d'accueil avec citation typewriter */
.portrait-quote>a{position:relative;display:block;overflow:hidden;background:#141611}
.portrait-quote .portrait-cite{position:absolute;left:0;right:0;bottom:0;padding:64px 16px 16px;font:500 13px/1.45 Type,monospace;letter-spacing:.02em;color:#f5f2eb;background:linear-gradient(180deg,transparent,rgba(20,22,17,.92) 62%)}
.people-editorial .volcano-portraits .portrait-quote img{object-fit:cover;background:#141611}
/* Marques : visuels produits plus grands sur l'accueil.
   Ticket bl3Kp60ONUvjpFddk8sw : la carte réservait 50 % de sa largeur au texte
   pour une image large de 47 % — 3 % de gouttière morte — et l'image était encore
   rentrée de 15 px en haut et en bas. Sa hauteur était figée à 420 px pour trois
   éléments courts (eyebrow, logo, CTA) empilés en haut : le reste était du vide.
   L'image prend maintenant toute la hauteur de la carte et une part plus large,
   et le bloc de texte se centre en face, comme la colonne de la section
   « Recherche & savoir-faire ». Ces règles sont bornées par média : sans borne,
   elles écrasaient aussi le palier tablette, qui n'était donc jamais appliqué. */
@media(min-width:1101px) and (min-height:481px){
  body[data-page="home"] .brand,body[data-page="home"] .brand+.brand,body[data-page="home"] .brand.bleuh,body[data-page="home"] .brand.mdh{padding-right:56%;min-height:420px;justify-content:center}
  body[data-page="home"] .brand .brand-product{width:55%;height:100%;top:0;bottom:auto;object-fit:cover}
  body[data-page="home"] .concept-caption{width:55%;bottom:0}
}
/* De 761 à 1100 px, la carte est trop étroite pour deux colonnes : l'image y
   tombait à un bandeau de 187 px de large, encore letterboxé par le
   `object-fit:contain` du palier tablette, sous 270 px de rembourrage bas hérité
   d'une mise en page empilée qui, elle, n'était jamais appliquée. On empile pour
   de bon et l'image passe pleine largeur. */
@media(min-width:761px) and (max-width:1100px) and (min-height:481px){
  body[data-page="home"] .brand,body[data-page="home"] .brand+.brand,body[data-page="home"] .brand.bleuh,body[data-page="home"] .brand.mdh{padding-right:0;padding-bottom:320px;min-height:0}
  body[data-page="home"] .brand .brand-product{width:100%;height:300px;top:auto;bottom:0;object-fit:cover}
  body[data-page="home"] .concept-caption{width:100%;bottom:0}
}

/* Retours a.veyrine 2026-09-10, suite du ticket bl3Kp60ONUvjpFddk8sw.
   Trois demandes sur les blocs marques de l'accueil : fond de carte aligné sur
   celui de la section, léger retrait de 5 px, et contenu de la colonne de
   gauche agrandi d'environ 20 %. Le +20 % porte sur le logo et le bouton, pas
   sur la largeur de la colonne : le visuel garde les 55 % gagnés par le ticket.
   Le fond seul peut être posé sans borne de média (une couleur ne dépend pas du
   palier) ; le retrait et les tailles doivent l'être palier par palier, sinon
   leur spécificité (0,2,x) écrase les règles de base (0,1,x) des media queries
   tablette et mobile — c'est exactement le défaut que le ticket a corrigé. */
.brands-section .brand,.brands-section .brand.bleuh,.brands-section .brand.mdh{background:#f3efe5}
/* Les deux logos sont en object-fit:contain : c'est la plus contraignante de la
   largeur et de la hauteur qui décide de leur taille rendue. Maison d'Herbes
   (260×45, très allongé) est bridé par la largeur, Bleuh (220×72) par la
   hauteur. Les deux limites doivent donc grandir ensemble, sinon le +20 % ne
   se voit que sur l'un des deux. Les largeurs valent à tous les paliers. */
.brands-section .brand>img.brand-logo{max-width:264px}
.brands-section .brand.bleuh>img.brand-logo{max-width:192px}

@media(min-width:761px) and (min-height:481px){
  /* +20 % : logo 220→264 px de large et 65→78 px de haut, bouton 11→13 px avec
     sa hauteur et ses marges internes à l'avenant. L'eyebrow passe de 9 à 11 px
     par la reprise typographique générale ; sa réserve de hauteur suit, sinon
     un libellé long gagne une ligne et décale le logo d'une carte sur deux. */
  .brands-section .brand>img.brand-logo{height:78px}
  .brands-section .brand .button{font-size:13px;min-height:53px;padding:12px 14px;gap:14px}
  .brands-section .brand>.eyebrow:first-child{min-height:44px}
  /* Le retrait de 5 px s'ajoute aux valeurs du palier, il ne les remplace pas. */
  .brands-section .brand,.brands-section .brand.bleuh,.brands-section .brand.mdh{padding-top:29px;padding-bottom:33px;padding-left:5px}
}
@media(min-width:1101px) and (min-height:481px){
  /* La colonne de texte est délimitée par le padding-right : on lui ajoute les
     5 px ici pour que le retrait soit le même des quatre côtés. */
  body[data-page="home"] .brands-section .brand,body[data-page="home"] .brands-section .brand.bleuh,body[data-page="home"] .brands-section .brand.mdh{padding-right:calc(56% + 5px)}
}
@media(min-width:761px) and (max-width:1100px) and (min-height:481px){
  /* Ici la carte est empilée : le visuel est en bas, le retrait droit est donc
     un vrai retrait et non une réserve de place. */
  body[data-page="home"] .brands-section .brand,body[data-page="home"] .brands-section .brand.bleuh,body[data-page="home"] .brands-section .brand.mdh{padding-right:5px;padding-bottom:325px}
}
@media(max-width:760px),(max-height:480px) and (orientation:landscape){
  /* Mêmes proportions en petit : logo 52→62 px, bouton 10→12 px. L'eyebrow
     mobile reste à 8 px, il n'était pas visé par la reprise des 9 px. */
  .brands-section .brand>img.brand-logo{height:62px}
  .brands-section .brand .button{font-size:12px;gap:10px;padding:12px}
  /* Prefixé par body[data-page] : plus bas dans le fichier, un bloc mobile pose
     `body[data-page="home"] .brand{padding-right:0}` en (0,2,1) et l'emporterait
     sinon sur le retrait droit, qui sortirait à 0 d'un seul côté. */
  body[data-page="home"] .brands-section .brand,body[data-page="home"] .brands-section .brand.bleuh,body[data-page="home"] .brands-section .brand.mdh{padding:29px 5px 5px}
  .brands-section .brand,.brands-section .brand.bleuh,.brands-section .brand.mdh{padding:29px 5px 5px}
}
/* Nos histoires : section Presse & médias (modèle danychanv.com) */
.press-section{background:#141611;color:#f5f2eb;border-bottom:0}
.press-section .eyebrow{color:#cfcabb}
.press-section .section-heading p,.press-section .archive-heading p{color:#b9b6a9}
.press-section h2{color:#f5f2eb}
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:34px 0 18px}
.media-card{position:relative;display:block;overflow:hidden;background:#000;aspect-ratio:16/9}
.media-card img{width:100%;height:100%;object-fit:cover;opacity:.75;transition:opacity .2s,transform .3s}
.media-card:hover img{opacity:.9;transform:scale(1.03)}
.media-play{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border:1px solid #f5f2eb;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:#f5f2eb;background:rgba(20,22,17,.55)}
.media-copy{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));display:flex;flex-direction:column;gap:4px}
.media-copy small{font:10px/1.5 Type,monospace;letter-spacing:1.5px;text-transform:uppercase;color:#d8d3bf}
.media-copy strong{font:600 16px/1.25 Inter,Arial,sans-serif;letter-spacing:-.02em;color:#fff}
.press-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(250px,auto);gap:18px}
.press-card{position:relative;display:flex;align-items:flex-end;overflow:hidden;background:#1f221c;min-height:250px}
.press-card-featured{grid-column:span 2;grid-row:span 2;min-height:520px}
.press-card-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity .25s,transform .4s}
.press-card:hover .press-card-image{opacity:.7;transform:scale(1.03)}
.press-card-content{position:relative;padding:22px 20px 18px;background:linear-gradient(180deg,transparent,rgba(20,22,17,.9) 45%);width:100%}
.press-card-featured .press-card-content{padding:34px 32px 28px}
.press-meta{display:flex;justify-content:space-between;gap:14px;font:10px/1.5 Type,monospace;letter-spacing:1.5px;text-transform:uppercase;color:#d8d3bf;margin-bottom:12px}
.press-card h3{font-size:22px;line-height:1.12;margin:0 0 10px;color:#fff}
.press-card-featured h3{font-size:clamp(30px,3.4vw,46px)}
.press-card p{font:15px/1.45 Georgia,'Times New Roman',serif;color:#d6d3c8;margin:0 0 14px;max-width:520px}
.press-card-featured p{font-size:17px}
.press-link{font:600 12px/1 Inter,Arial,sans-serif;letter-spacing:.04em;color:#f5f2eb;text-decoration:underline;text-underline-offset:5px}
.archive-heading{margin:54px 0 24px;max-width:620px}
.archive-heading h3{font-size:clamp(26px,2.6vw,36px);margin:0 0 12px;color:#f5f2eb}
.archive-heading p{font-size:15px;margin:0}
.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.archive-card{position:relative;display:block;overflow:hidden;background:#000;aspect-ratio:3/2}
/* Carte double. 26 articles + 4 doubles = 30 cellules = 10 rangees pleines sur
   trois colonnes (25/09/2026 : panel de l'AQIC). Les quatre doubles sont les
   cartes 1, 4, 11 et 26 du HTML : a ces places elles demarrent en colonne 1 ou
   2 et tiennent dans leur rangee ; posee sur la derniere colonne, une carte
   double partirait a la ligne en laissant un trou. Ajouter ou retirer un
   article casse le compte : en ajouter trois d'un coup, en tete, le preserve.
   Hauteur : sans ratio propre, la grille lui donne celle de la carte simple
   qui l'accompagne dans sa rangee. Il faut les DEUX declarations — l'image
   sortie du flux, sinon c'est elle qui impose sa hauteur naturelle (880px de
   large en 3/2 = 586px de haut, le double de ses voisines). */
.archive-card-wide{grid-column:span 2;aspect-ratio:auto}
.archive-card-wide img{position:absolute;inset:0}
.archive-card img{width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(.7);transition:opacity .2s,transform .3s}
.archive-card:hover img{opacity:.8;transform:scale(1.03)}
.archive-copy{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.88));display:flex;flex-direction:column;gap:5px}
.archive-copy small{font:11px/1.5 Type,monospace;letter-spacing:1.5px;text-transform:uppercase;color:#d8d3bf}
.archive-copy strong{font:600 15px/1.25 Inter,Arial,sans-serif;letter-spacing:-.02em;color:#fff}
@media(max-width:1000px){.press-grid,.archive-grid,.media-grid{grid-template-columns:repeat(2,1fr)}.press-card-featured{grid-column:span 2;grid-row:span 1;min-height:380px}
/* Deux colonnes ou une : la carte double redevient normale — le compte des
   cellules ne tombe juste que sur trois colonnes. */
.archive-card-wide{grid-column:auto;aspect-ratio:3/2}.archive-card-wide img{position:static}}
@media(max-width:760px),(max-height:480px) and (orientation:landscape){.press-grid,.archive-grid,.media-grid{grid-template-columns:1fr;gap:12px}.press-card-featured{grid-column:span 1;min-height:320px}.press-card{min-height:230px}.portrait-quote .portrait-cite{font-size:12px;padding:50px 12px 12px}body[data-page="home"] .brand,body[data-page="home"] .brand+.brand,body[data-page="home"] .brand.bleuh,body[data-page="home"] .brand.mdh{padding-right:0;min-height:0}body[data-page="home"] .brand .brand-product{position:relative;width:100%;height:auto;aspect-ratio:1/1;top:0}body[data-page="home"] .concept-caption{width:auto}}
/* Bannière Dany + Laurence : garder les deux visages dans le cadre */
body[data-page="home"] .hero-immersive .hero-image{width:68%}
body[data-page="home"] .hero-immersive .hero-image>img{object-position:84% 40%}
@media(max-width:1000px){body[data-page="home"] .hero-immersive .hero-image{width:66%}}
@media(max-width:760px),(max-height:480px) and (orientation:landscape){body[data-page="home"] .hero-immersive .hero-image{width:100%}body[data-page="home"] .hero-immersive .hero-image>img{object-position:74% 35%}}

/* Section Recherche : 3 colonnes comme la maquette de Dany (texte | photo | colonne tagline + monogramme) */
body[data-page="home"] .science{grid-template-columns:34.5fr 43.5fr 22fr;min-height:0}
body[data-page="home"] .science>div{padding:64px 40px;align-self:center}
body[data-page="home"] .science>img{height:100%;min-height:0;max-height:none;aspect-ratio:940/725;object-fit:cover;object-position:center}
body[data-page="home"] .science-aside{display:flex;flex-direction:column;padding:26% 24px 40px 12%;color:#e2e0d5}
body[data-page="home"] .science-tagline{font:11px/2.6 Type,monospace;letter-spacing:3px;text-transform:uppercase;color:#e2e0d5;margin:0;max-width:170px}
body[data-page="home"] .science-rule{display:block;width:100px;height:1px;background:#e2e0d5;margin:38px 0 auto}
body[data-page="home"] .science img.science-mark{width:37%;max-width:135px;height:auto;min-height:0;max-height:none;aspect-ratio:auto;align-self:flex-end;margin:auto 12% 0 0;filter:none;object-fit:contain}
@media(max-width:1000px){body[data-page="home"] .science{grid-template-columns:1fr 1fr}body[data-page="home"] .science-aside{grid-column:1/-1;flex-direction:row;align-items:center;padding:22px 40px}body[data-page="home"] .science-rule{margin:0 24px}body[data-page="home"] .science img.science-mark{width:64px;margin:0 0 0 auto}}
@media(max-width:760px),(max-height:480px) and (orientation:landscape){body[data-page="home"] .science{grid-template-columns:1fr}body[data-page="home"] .science>div{padding:40px 24px}body[data-page="home"] .science>img{height:300px;aspect-ratio:auto}body[data-page="home"] .science-aside{padding:20px 24px}body[data-page="home"] .science-tagline{font-size:10px;line-height:2.2}}

/* ---------------------------------------------------------------------------
   Typographie officielle Groupe Chanv — ticket Daphnée EDVbCVyby6j9ooSLwCGq.
   Le guide de marque (GroupeChanv_BrandGuide, p. 20) prescrit Circular XX pour
   tout : surtitres en capitales espacées (+10 %), titres Regular/Bold (-2 %),
   texte courant Regular aligné à gauche. Cette couche remplace Inter (titres,
   navigation), Georgia (paragraphes) et la typewriter (surtitres) d'un seul
   geste ; les tailles et compositions de la maquette restent en place. */
@font-face{font-family:"Circular XX";src:url('/assets/circular-300.otf') format('opentype');font-weight:300;font-display:swap}
@font-face{font-family:"Circular XX";src:url('/assets/circular-400.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:"Circular XX";src:url('/assets/circular-700.otf') format('opentype');font-weight:700;font-display:swap}
:root{--font-brand:"Circular XX",Figtree,Arial,sans-serif}
body,h1,h2,h3,h4,p,li,button,input,textarea,select,a,
.eyebrow,.hero-note,.number,.split figcaption,.preview,.image-caption,.value-words sup,
.brand .eyebrow,.story-themes .eyebrow,.story-copy time,.steps p,.manifesto .value-words span,
.value-grid article>h2,.value-grid article>h3,.value-grid article>p,.footer-top p,
.concept-caption,.portrait-caption,.brand-wordmark,.wordmark b,.wordmark small,
.people-editorial .volcano-portraits figcaption,.employee-layout figcaption,.portrait-quote .portrait-cite,
.media-copy small,.media-copy strong,.press-meta,.press-card p,.press-link,.archive-copy small,.archive-copy strong,
body[data-page="home"] .science-tagline,.site-form input:not([type=checkbox]),.site-form textarea{font-family:var(--font-brand)}
/* Titres : Bold, interlettrage -2 % (la maquette serrait Inter à -5,5 %, trop pour Circular). */
h1,h2,h3{font-weight:700;letter-spacing:-.02em}
/* Surtitres : Regular, capitales, +10 % d'interlettrage — plus la typewriter à 20 %. */
.eyebrow,.hero-note,.number,.split figcaption,.preview,.image-caption,.brand .eyebrow,.story-themes .eyebrow,.story-copy time,.press-meta,.media-copy small,.archive-copy small,body[data-page="home"] .science-tagline{font-weight:400;letter-spacing:.1em;text-transform:uppercase}
.eyebrow{font-size:11px}
/* Texte courant : le serif à 19 px devient trop lourd en sans ; 17 px / 1.5 garde la même largeur de colonne. */
p{font-size:17px;line-height:1.5}
.steps p{font-size:15px;line-height:1.5}
.footer-top p{font-size:14px}
.brand-wordmark{letter-spacing:-.02em}

[data-page=nos-marques] .hero-image>img{object-position:center center}
[data-page=nos-histoires] .hero-image>img{object-position:center 38%}

/* Les deux cartes du bas occupent trois colonnes contre deux pour celles du
   haut : une hauteur d'image imposée par un ratio y donnait 630 px sous des
   images de 225 px. C'est ce décalage qui se lisait comme une disproportion.
   Les cinq images sont désormais tenues par la hauteur, la largeur en plus
   servant l'image et non l'encombrement. */
@media(min-width:761px) and (min-height:481px){.value-grid article:nth-child(n+4)>img{height:250px;aspect-ratio:auto}}
/* La photo est verticale et la carte très horizontale : la bande visible ne fait
   que 421 px sur 1448. Calée à 30 % elle tient les trois choses demandées — le
   ciel doré, les bâtiments et les rangs, le travailleur au chapeau. Plus haut on
   perd sa silhouette, plus bas on perd le ciel. */
.value-grid article:nth-child(n+4)>img.patience-field{object-fit:cover;object-position:50% 30%;filter:none}
/* Sur mobile, laisser cette carte reprendre la photo entière la faisait deux fois
   plus haute que les quatre autres (406 px contre 200) : la disproportion corrigée
   sur grand écran revenait telle quelle sur téléphone. Elle garde donc la hauteur
   commune. La carte étant moins large que sur bureau, le recadrage y montre même
   davantage de photo — 668 px de source contre 421. */
/* Le titre Recherche reste dans la colonne sur les écrans de 320 px. */
@media(max-width:360px){body[data-page="home"] .science{grid-template-columns:minmax(0,1fr)}body[data-page="home"] .science h2{font-size:32px}}

/* TÉLÉPHONE COUCHÉ — largeur d'une petite tablette, hauteur d'une bande.
   La navigation, les marges et la typographie restent celles du mobile : c'est
   ce que Dany demandait. Mais les grilles du mobile n'ont qu'une colonne, pensée
   pour 390 px de large. Laissées telles quelles sur 850 px, chaque carte
   s'étirait sur toute la largeur et chaque photo devenait plus haute que
   l'écran — « Nos histoires » mesurait 41 700 px de long, soit cent écrans à
   faire défiler. On ne change pas de mise en page, on rend aux grilles la
   largeur qu'elles ont. */
@media(max-height:480px) and (orientation:landscape){
  .people-editorial .portraits{grid-template-columns:repeat(4,minmax(0,1fr))}
  .value-grid,.press-grid,.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .value-grid article,.value-grid article:nth-child(n+4){grid-column:auto}
  /* Les deux sélecteurs suivants portent la classe qui les qualifie ailleurs
     dans la feuille ; sans elle, la règle mobile à une colonne l'emportait. */
  .story-themes.with-people{grid-template-columns:repeat(3,minmax(0,1fr))}
  .brands-section .brands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .archive-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* La grille repasse a trois colonnes ici : les cartes doubles reprennent,
     sinon la derniere rangee retrouve son trou. */
  .archive-card-wide{grid-column:span 2;aspect-ratio:auto}
  .archive-card-wide img{position:absolute;inset:0}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .form-row,.contact-grid,.footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Nos marques : la carte reste empilée comme sur mobile. Seule l'image change
     — en carré sur 790 px de large elle faisait deux écrans de haut à elle
     seule. Une bande de 300 px la remet à l'échelle de l'écran. Remettre
     l'image à côté du texte a été essayé et écarté : le texte de la carte est
     bien plus haut qu'elle, et il restait un grand vide à sa droite. */
  body[data-page="nos-marques"] .brand .brand-product{aspect-ratio:auto;height:300px;min-height:0;object-fit:cover}
}

/* TÉLÉPHONE COUCHÉ, DEUXIÈME ÉTAGE — la bannière et les blocs texte+photo.
   Le bloc ci-dessus rend aux grilles la largeur qu'elles ont ; il ne touchait ni
   la bannière ni les blocs à deux colonnes, qui restaient empilés. Résultat :
   la bannière de l'accueil faisait 888 px sur un écran de 393 px de haut, titre
   coupé en plein mot, moitié droite noire et vide, photo à l'écran suivant.
   La cause tient en une ligne, et c'est celle du plafond : le corps du titre est
   réglé en pourcentage de la LARGEUR (9,8vw, plafonné à 58 px). Un téléphone
   debout de 390 px reçoit 38 px ; couché, la règle réclame 83 px et prend son
   plafond — l'écran le moins haut du site héritait du plus gros titre.
   Ici le titre se règle sur la hauteur, et la bannière reprend les deux colonnes
   qu'elle a déjà sur ordinateur. Un téléphone couché a de la largeur, pas de la
   hauteur : c'est la seule chose que ce bloc exploite.
   Décidé le 10/09 — partie 2 du plan « Trois mises en page à décider ». */
@media(max-height:480px) and (orientation:landscape){

  /* 0. L'en-tête est collant et mesurait 76 px : sur un écran de 393 px de haut,
     un cinquième de la page confisqué en permanence. Il retombe à 60 px, mesurés.
     Pas à 54 : le plancher réel est le bouton Menu, dont la zone tactile ne se
     rétrécit pas — c'est voulu, on lit ici d'une main dans un autobus. */
  header{min-height:54px;padding:8px 15px}

  /* 1. La bannière occupe le premier écran, et reprend ses deux colonnes. Mesuré
     à 851x393 : elle va de 68 à 407 px. Son bord bas dépasse donc la ligne de
     flottaison de 14 px — aucun texte n'est coupé (la colonne est centrée) et
     rien de la section suivante ne dépasse au-dessus. C'est le bon sens : mieux
     vaut 14 px de bannière à découvrir qu'un liseré de la section d'après. */
  .hero-immersive{display:block;min-height:0}
  .hero-immersive .hero-copy,
  body[data-page="home"] .hero-immersive .hero-copy{
    width:54%;padding:18px 18px 18px var(--gutter);background:transparent;
    min-height:calc(100vh - 54px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
  .hero-immersive .hero-image,
  body[data-page="home"] .hero-immersive .hero-image{
    position:absolute;inset:0 0 0 auto;width:58%;height:auto;min-height:0;z-index:-1}
  .hero-immersive .hero-image:after{
    background:linear-gradient(90deg,#141611,rgba(20,22,17,.28) 34%,transparent 64%)}

  /* 2. Le titre se règle sur la hauteur, plus sur la largeur. */
  .hero-immersive h1,html[lang=es] .hero-immersive h1{
    font-size:31px;line-height:1.05;margin:0 0 10px}
  .hero-immersive .hero-copy>.eyebrow{font-size:8px;margin-bottom:12px}
  .hero-immersive .eyebrow i{margin-top:8px}
  .hero-immersive .hero-copy>p{font-size:13px;line-height:1.45;margin-bottom:14px;max-width:340px}

  /* Même traitement pour les bannières des pages intérieures. */
  .hero{grid-template-columns:1.08fr .92fr;min-height:calc(100vh - 62px);margin:8px 8px 0}
  .hero-copy{padding:18px 20px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
  .hero h1{font-size:30px;line-height:1.06}
  .hero-copy>p{font-size:13px;line-height:1.45}
  .hero-image{min-height:0}
  /* L'espagnol a ses propres tailles de titre dans style.css et dany.css, écrites
     avec `html[lang=es]` — plus spécifique que le `.hero h1` ci-dessus, qui ne
     peut donc pas les atteindre. Sans cette ligne, les pages ES gardent leur
     clamp en vw et retombent dans le travers que ce bloc corrige. */
  html[lang=es] .hero h1{font-size:30px;line-height:1.06}

  /* 3. Texte et photo côte à côte, comme sur grand écran. Empilés, chaque bloc
     faisait deux écrans : un de texte, un de photo. C'est le geste qui rend la
     page parcourable. */
  .split{grid-template-columns:1.02fr .98fr;gap:26px;align-items:center}
  .split h2{font-size:27px}
  .split figure img,.split>figure>img{height:238px;object-fit:cover}
  .about-editorial{grid-template-columns:1.02fr .98fr;align-items:center}
  .about-editorial figure img{height:238px;object-fit:cover}
  .science,body[data-page="home"] .science{grid-template-columns:1.02fr .98fr;align-items:stretch}
  .science>div,body[data-page="home"] .science>div{padding:26px 24px;display:flex;
    flex-direction:column;justify-content:center}
  .science h2{font-size:29px}
  .science img,body[data-page="home"] .science>img{height:100%;min-height:250px;object-fit:cover}
  .cta{grid-template-columns:1.1fr auto;align-items:center;padding:30px 24px}
  .cta h2{font-size:27px}

  /* 4. Les respirations verticales sont calculées pour un écran de 844 px de haut. */
  .section{padding-top:34px;padding-bottom:34px}

  /* 5. Deux bandes posent leur photo en `position:absolute` et lui réservent sa place
     par un padding démesuré : 310 px SOUS les valeurs, 260 px AU-DESSUS de l'appel
     Carrière. Les deux règles génériques ci-dessus — `.section{padding-bottom:34px}`
     et `.cta{padding:30px 24px}` — ont la même spécificité qu'elles et passent après :
     elles rendaient donc le padding à 34 px et la photo repassait PAR-DESSUS le texte.
     On perdait le bouton « Découvrir nos valeurs », puis le titre et le paragraphe de
     l'appel Carrière ; il ne restait qu'un bouton posé dans un aplat vide.
     Régression introduite le 10/09 par ce bloc, signalée le jour même, corrigée ici.
     La réparation ne rend pas le padding : couché, on a 851 px de large, donc la photo
     reprend le côté — le même geste que pour la bannière plus haut.
     Les 34 px verticaux sont le chiffre du `.section` du point 4 : ces deux bandes
     doivent respirer comme leurs voisines, pas moins. Écrits à 28 le 10/09, ils se
     voyaient — « les autres sections en ont, pourquoi pas là » (11/09). Si le 34 du
     point 4 bouge, bouger ces deux-là avec. */
  .manifesto{padding:34px 47% 34px 24px;min-height:0}
  .manifesto>img{inset:0 0 0 auto;width:44%;height:100%}
  .manifesto h2{font-size:27px}
  .manifesto .value-words{margin:18px 0;gap:10px 20px}
  .manifesto .value-words span{font-size:19px}
  .career-cta{padding:34px 24px 34px 45%;min-height:0}
  .career-cta>img{inset:0 auto 0 0;width:42%;height:100%}
  .career-cta h2{font-size:27px}
  .career-cta p{font-size:15px;margin:14px 0}
}

/* TABLETTE — le diagnostic est une absence.
   Entre 761 et 1100 px de large, le site reçoit la mise en page du bureau,
   seulement rétrécie : personne ne l'a dessinée. Un iPad debout fait 768, 810 ou
   834 px — en plein dedans. Rien ne déborde, rien n'est cassé au sens strict, et
   c'est pour ça que ça passe inaperçu tant qu'on ne mesure pas.
   Ce bloc rallonge légèrement les pages (accueil 5 406 -> 5 526 px). C'est
   l'échange voulu : de la longueur contre de la lisibilité, sur un appareil qui
   a de la hauteur à revendre — l'arbitrage inverse du téléphone couché, pour la
   raison inverse. Au-delà de 1100 px, rien ne change.
   Décidé le 10/09 — partie 3 du plan « Trois mises en page à décider ». */
@media(min-width:761px) and (max-width:1100px) and (min-height:481px){

  /* 1. « Notre modèle intégré » gardait ses cinq colonnes de bureau. Sur 768 px
     de large il restait 121 px de texte par étape : trois mots par ligne, et
     « Bâtir des marques » passait sur deux lignes quand les quatre autres
     tenaient sur une, ce qui désalignait toute la rangée. Trois puis deux, et
     chaque étape retrouve 235 px, mesurés à 768. */
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 0}
  /* Les filets séparent les étapes ENTRE elles : la première n'en porte pas. Sur
     deux rangées, la quatrième ouvre la seconde et ne doit pas en porter non
     plus, sinon la rangée du bas commence par un trait suspendu que celle du
     haut n'a pas. */
  .steps li:nth-child(4){border-left:0}
  .steps h3{font-size:19px;min-height:0;margin-bottom:6px}
  .steps p{font-size:14px}

  /* 2. Les portraits de « Nos histoires » étaient bridés à 400 px et poussés
     contre le bord droit ; la colonne de texte tombait alors à 243 px et le
     titre se cassait en lignes de trois mots, à côté de 307 px de vide. Sur une
     tablette debout, le texte prend la largeur et les quatre portraits
     s'alignent dessous. */
  .people-editorial{grid-template-columns:minmax(0,1fr);gap:30px}
  .people-editorial>div{max-width:640px}
  .people-editorial .portraits{max-width:none;margin-left:0;
    grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .people-editorial h2{font-size:34px}

  /* 3. Les cartes de « Ce qui nous guide » tombaient à 215 px de large. Les
     sous-titres d'une ligne et de deux lignes ne s'alignaient plus, donc les
     photos et les textes démarraient à trois hauteurs différentes dans la même
     rangée. Deux par rangée. */
  .value-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .value-grid article,.value-grid article:nth-child(n+4){grid-column:span 2}
  /* Deux par rangée laisse encore un sous-titre sur deux lignes en face d'un
     sous-titre d'une ligne ; on lui réserve les deux lignes pour que les photos
     d'une même rangée démarrent à la même hauteur. */
  .value-grid article>h3{min-height:2.6em}

  /* La bande des valeurs réserve la place de sa photo par un padding droit de 47 %.
     La règle de gouttière unifiée plus haut — « V8 », `header,.section,…{padding-left:
     var(--gutter);padding-right:var(--gutter)}` — a la même spécificité et passe
     après : elle ramène ce padding à la gouttière et le texte reprend toute la
     largeur, photo comprise. Sous ~950 px les cinq mots sont assez longs pour aller
     se ranger DERRIÈRE la photo : « Patience » coupé en deux, « Résilience »
     invisible. Vérifié masqué à 761, 800 et 900 px, propre à partir de 1000 —
     c'est cette frontière qui explique que le défaut ait tenu si longtemps.
     Réparé ici seulement : au-delà de 1100 px la composition actuelle est celle que
     tout le monde regarde depuis des semaines, on ne la déplace pas sans avis. */
  .manifesto{padding-right:47%}
}

/* Accueil : bandeau « Suivez notre fondateur » vers danychanv.com, sous
   l'ouverture (maquette de Dany, ticket flZwx96iNrU9PRqYejok). Texte sur fond
   ivoire à gauche, photo de la jeep dans le champ à droite ; la photo passe
   sous le texte sur téléphone. */
.founder-band{display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;background:var(--ivory);border-bottom:1px solid var(--line)}
.founder-band .founder-copy{padding:var(--section-space) var(--gutter);align-self:center}
.founder-band .eyebrow{color:#5c5a52}
.founder-band h2{font-size:clamp(40px,4.6vw,66px);line-height:1.02;margin:0 0 18px;max-width:9.5em}
.founder-band p{font:clamp(17px,1.5vw,21px)/1.45 Inter,Arial,sans-serif;margin:0 0 30px;max-width:30em}
.founder-band img{display:block;width:100%;height:100%;min-height:340px;object-fit:cover;object-position:62% center}
@media(max-width:760px),(max-height:480px) and (orientation:landscape){
  .founder-band{grid-template-columns:minmax(0,1fr)}
  .founder-band img{height:auto;min-height:0;aspect-ratio:16/10}
}

/* Accueil : « Nos marques » selon la maquette d'Antoine Laroche (tâche
   6orcZAwPjiJWL7ZzaJta, demande de Daphnée) : en-tête centré, deux grandes photos
   aux coins arrondis côte à côte, puis le nom de la marque souligné et sa
   description, centrés. Toute la carte mène au site de la marque. Proportions
   reprises de la maquette : photo 1012 × 971, gouttière ≈ 2,5 % de la largeur
   utile, rayon ≈ 1,5 % ; les tailles de texte restent celles du site. Les cartes
   .brand (logo + bouton) ne servent plus que sur la page Nos marques. */
.brands-section{text-align:center}
.brands-section>.eyebrow,.brands-section>.section-heading{justify-content:center}
.brands-section>p{max-width:700px;margin-left:auto;margin-right:auto}
.brand-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,34px);margin-top:clamp(32px,3.9vw,56px)}
.brand-card{display:flex;flex-direction:column;align-items:center;min-width:0;color:inherit;text-decoration:none}
.brand-card img{display:block;width:100%;height:auto;aspect-ratio:1012/971;object-fit:cover;border-radius:clamp(14px,1.4vw,20px)}
.brand-card-name{margin-top:clamp(18px,1.7vw,24px);font-size:20px;font-weight:700;line-height:1.3;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.brand-card:hover .brand-card-name{text-decoration-thickness:3px}
.brand-card-text{margin-top:10px;font-size:17px;line-height:1.45;color:var(--muted);text-wrap:pretty}
@media(max-width:560px){
  .brand-cards{grid-template-columns:minmax(0,1fr);gap:44px}
}

/* Carrière : trois offres d'emploi ajoutées le 10/10/2026 (demande de Dany,
   DM du matin, 3 PDF) remplacent l'état vide de #postes. Cartes sobres dans
   l'esprit du site : même ton bordure/ivoire que .empty, qu'elles remplacent ;
   une colonne jusqu'à 760px, trois au-delà. La candidature spontanée reste
   accessible juste en dessous, vers #candidature. */
.job-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:35px}
.job-card{display:block;border:1px solid var(--line);background:var(--ivory);padding:28px;color:inherit;text-decoration:none;transition:border-color .2s}
.job-card:hover,.job-card:focus-visible{border-color:var(--ink)}
.job-card-meta{margin:0 0 10px;font-size:13px;color:var(--muted)}
.job-card h3{margin:0 0 10px;font-size:22px;line-height:1.2}
.job-card p{margin:0 0 16px;font-size:16px;line-height:1.5}
.job-card .text-link{margin:0;display:inline}
.job-cards-note{margin-top:28px;font-size:15px}
@media(min-width:761px){
  .job-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
}

/* Demandes (lot 7, 16/10/2026) : la liste d'objets de « Nous joindre », le formulaire de dons, la page de suivi /demande/. */
.site-form select{display:block;width:100%;border:1px solid #aaa69d;background:#fff;padding:13px;margin-top:7px;font:16px var(--font-brand,Figtree,Arial,sans-serif);border-radius:0;color:var(--ink)}
.site-form select:focus{border-color:#766b53}
.form-redirect{margin:-8px 0 18px;padding:12px;border-left:3px solid #766b53;background:var(--ivory);font-size:14px}.form-redirect[hidden]{display:none}.form-redirect a{text-decoration:underline}
.form-fieldset{border:0;border-top:1px solid var(--line);padding:22px 0 4px;margin:0 0 10px}.form-fieldset legend{padding:0 10px 0 0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#766b53}
.form-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:4px 0 18px}.site-form .choice{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin:0;line-height:1.4}.choice input{width:20px;height:20px;flex-shrink:0;margin-top:1px}.choice-fermee{color:var(--muted)}
.regles-dons .steps.regles{grid-template-columns:repeat(4,1fr)}.regles-note{margin-top:32px;font-size:15px}
.demande-page{max-width:860px}.demande-page h1{font-size:clamp(34px,4vw,56px)}.demande-etat{display:flex;gap:10px;align-items:baseline;font-size:15px}.demande-etat strong{padding:4px 10px;background:var(--ivory);border:1px solid var(--line)}.demande-etat strong[data-etat=attente]{background:#edf4eb;border-color:#38643e;color:#244a29}.demande-etat strong[data-etat=resolu]{color:var(--muted)}.demande-sujet{font-size:18px;color:var(--ink);margin-bottom:28px}
.demande-fil{list-style:none;padding:0;margin:0 0 36px;display:flex;flex-direction:column;gap:14px}.demande-fil li{border:1px solid var(--line);padding:18px 20px;max-width:720px;background:#fff}.demande-fil li.de-vous{align-self:flex-end;background:var(--ivory)}.demande-auteur{font-size:13px;color:var(--muted);margin-bottom:8px}.demande-texte p{margin-bottom:10px;max-width:none;color:var(--ink);font-size:16px}.demande-texte p:last-child{margin-bottom:0}.demande-texte a{text-decoration:underline}.demande-texte img{max-width:100%;height:auto}.demande-pieces{list-style:none;padding:0;margin:12px 0 0;font-size:14px}.demande-pieces a{text-decoration:underline}.demande-pieces span{color:var(--muted)}
.demande-reponse{margin-bottom:28px}.demande-clore{border-top:1px solid var(--line);padding-top:22px}.demande-clore p{font-size:14px}.demande-reglee{padding:14px;background:var(--ivory);border-left:3px solid #766b53;font-size:15px}
@media(max-width:760px){.form-choices{grid-template-columns:1fr}.regles-dons .steps.regles{grid-template-columns:1fr}.demande-fil li{max-width:100%}}