/* LES SIX PAGES MÉTIER — stratégie, identité, web, IA, print, événementiel.

   Réunion de expertises.css et expertises-v2.css, que ces six pages
   chargeaient toutes les deux, dans cet ordre. Le « v2 » ne disait rien de la
   page, seulement de l'ordre dans lequel elles ont été fabriquées. */

.studio-hero{padding:155px 5.3% 95px;min-height:800px;display:grid;grid-template-columns:1fr 1.1fr;gap:5%;align-items:center}.brand-composition{position:relative;height:520px}.brand-photo{position:absolute;inset:0 0 45px 35px;border-radius:8px;overflow:hidden;box-shadow:0 20px 40px #182e361c}.brand-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1s}.brand-composition:hover img{transform:scale(1.06)}.type-tile{position:absolute;background:var(--orange);left:-20px;bottom:10px;width:210px;height:230px;padding:22px;box-shadow:0 10px 30px #102d3415;transform:rotate(-5deg);animation:sway 10s infinite}.type-tile small,.type-tile span{font-size:8px;letter-spacing:.1em}.type-tile b{display:block;font-size:105px;line-height:1.5;letter-spacing:-10px}.swatch{position:absolute;right:-15px;top:75px;display:flex;transform:rotate(8deg);box-shadow:0 10px 20px #0002}.swatch i{width:45px;height:85px;background:var(--petrol)}.swatch i:nth-child(2){background:var(--ivory)}.swatch i:nth-child(3){background:var(--orange)}.composition-label{position:absolute;bottom:8px;right:0;font-size:9px;letter-spacing:.15em}/* Coins droits : Jonas veut des sections carrées, sur mobile comme sur
   grand écran. L'arrondi de 90 ou 100px sur un seul coin est parti. */
.studio-services{padding:110px 5.3%}.service-workbench{display:grid;grid-template-columns:.8fr 1.8fr;gap:5%}.service-selector{display:flex;flex-direction:column}.service-selector button{display:flex;align-items:center;gap:18px;text-align:left;background:transparent;border:0;border-bottom:1px solid #425054;color:#abb5b6;padding:25px 0;font-size:17px}.service-selector button span{font-size:11px}.service-selector button b{margin-left:auto;font-weight:400;font-size:22px}.service-selector button[aria-selected=true]{color:var(--orange)}.service-selector button[aria-selected=true] b{transform:rotate(45deg)}.service-panel{display:grid;grid-template-columns:.8fr 1fr;gap:30px;animation:panel-in .5s both;min-height:380px}.service-panel[hidden]{display:none}.panel-art{position:relative;background:#1a454e;border-radius:100px 100px 12px 12px;min-height:320px;display:grid;place-items:center;overflow:hidden}.panel-art>div{scale:.78}.panel-art.art-identity{background:var(--orange)}.panel-copy h3{font-size:32px;margin:10px 0 22px}.panel-copy p{font-size:16px;text-align:justify;hyphens:auto;color:#bcc8c9}.panel-copy ul{padding:0;list-style:none;margin-top:25px}.panel-copy li{font-size:12px;padding:9px 0;border-top:1px solid #3c4a4e}.production-note{display:grid;grid-template-columns:1fr 1fr;gap:7%;padding:120px 7%;align-items:center}.pricing{padding:20px 5.3% 100px}.price-intro{display:grid;grid-template-columns:1.3fr 1fr;gap:10%;align-items:end;margin-bottom:55px}.price-intro>p{text-align:justify;hyphens:auto;max-width:430px}.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}@media(min-width:901px){.price-grid.price-grid--4{grid-template-columns:repeat(4,1fr)}}.price-card{background:#ebe9e1;border-radius:10px;padding:32px;display:flex;flex-direction:column}.price-card.featured{background:var(--petrol);color:var(--ivory)}.price-card h3{font-size:28px}.price-card .price{font-size:65px;line-height:1;letter-spacing:-.06em;margin:30px 0}.price small{display:block;font-size:11px;letter-spacing:0;margin-bottom:12px}.price span{font-size:30px}.price-card ul{padding:25px 0;list-style:none;margin:22px 0;border-top:1px solid #929a9944;flex:1}.price-card li{font-size:13px;margin-bottom:13px;line-height:1.4;padding-left:17px;position:relative}.price-card li:before{content:'·';position:absolute;left:0;color:var(--orange);font-size:22px;line-height:.8}.price-card .scope{opacity:.7;min-height:65px;font-size:12px!important;margin-bottom:18px}.related-links{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:55px}.related-links a{text-decoration:none;font-size:27px;padding:25px 0;border-top:1px solid #758c9144;transition:color .2s}.related-links a:hover{color:var(--orange)}.related-links span{display:block;font-size:12px;margin-top:15px;color:#a9bec2}@media(max-width:1100px){.service-workbench{grid-template-columns:.7fr 1.4fr}.service-panel{grid-template-columns:1fr}.panel-art{min-height:200px;height:200px;border-radius:12px}.price-card{padding:22px}.brand-composition{height:460px}.type-tile{width:170px;height:210px}.type-tile b{font-size:90px}}@media(max-width:900px){.studio-hero{padding:135px 6% 65px;gap:30px}.studio-heading h1{font-size:59px}.brand-composition{height:400px}.type-tile{width:145px;height:180px}.type-tile b{font-size:75px}.swatch i{width:30px;height:60px}.service-workbench{grid-template-columns:1fr}.service-selector{display:grid;grid-template-columns:1fr 1fr;gap:0 25px;margin-bottom:35px}.service-panel{grid-template-columns:.8fr 1fr}.panel-art{height:100%;min-height:320px}.price-grid{gap:12px}.price-card h3{font-size:24px}.price-card .price{font-size:50px}}@media(max-width:650px){.studio-hero{display:flex;flex-direction:column;align-items:stretch}.studio-heading h1{font-size:62px}.brand-composition{height:400px;margin-top:15px}.brand-photo{left:20px}.type-tile{left:0}.production-note{display:flex;flex-direction:column;padding:65px 6%;gap:40px}.service-selector button{font-size:13px;gap:8px;padding:20px 0}.service-panel{grid-template-columns:1fr}.panel-art{min-height:230px;height:230px}.panel-art>div{scale:.85}.price-intro{display:block}.price-intro>p{margin-top:30px}.pricing{padding:20px 6% 65px}.price-grid{grid-template-columns:1fr;gap:22px}.price-card{padding:30px}.price-card .scope{min-height:0}.related-links{grid-template-columns:1fr;gap:0}}.pricing{padding-bottom:65px}.métier-tile b{font-size:65px;line-height:2;letter-spacing:-4px}.proof-art{min-height:420px;background:#173d45;border-radius:10px 100px 10px 10px;display:grid;place-items:center;position:relative;overflow:hidden}.proof-art>span{position:absolute;bottom:25px;left:30px;font-size:10px;letter-spacing:.13em;color:#f8f5ed}.quote-price{font-size:39px!important;letter-spacing:-.045em!important}.quote-price small{line-height:1.5;font-size:11px;letter-spacing:0}.price-card h3{min-height:2.24em}@media(max-width:650px){.proof-art{width:100%;min-height:320px}.métier-tile b{font-size:43px}.price-card h3{min-height:0}}
body[data-expertise] .studio-heading h1{font-size:clamp(48px,5.3vw,80px)}@media(max-width:650px){body[data-expertise] .studio-heading h1{font-size:52px}}
/* La preuve de « Des choix qui peuvent se réaliser » : une vraie photo de
   l'atelier, pas une abstraction. C'est la seule chose de cette page qu'un
   concurrent qui sous-traite ne peut pas publier. */
.proof-photo{margin:0;position:relative}
.proof-photo img{display:block;width:100%;height:auto;border-radius:0;
  box-shadow:none}

/* .proof-art était dimensionné pour un petit SVG décoratif (grid + place-items
   center, fond plein, coin arrondi asymétrique). La photo en héritait et ne
   s'affichait qu'en 58 px. Ici elle reprend toute la colonne. */
/* La photo reprend toute la colonne, mais elle garde le grand coin arrondi
   de la charte : c'est la signature du site, on ne la perd pas au passage. */
.proof-art.proof-photo{background:none;display:block;min-height:0;width:100%;
  place-items:stretch;overflow:hidden;border-radius:12px 90px 12px 12px}
/* AIO finitions 2026-09-11 : liste « ce qui m’intéresse » et questions métier facultatives dans le formulaire de devis (studio-graphique.html). Classes propres, aucune règle existante modifiée. */
.interest-fieldset{border:0;margin:0;padding:0;flex:1;min-width:280px}
.interest-fieldset legend{display:block;padding:0}
.interest-options{display:flex;flex-wrap:wrap;gap:12px 16px;list-style:none;padding:0;margin:0}
.interest-option{display:inline-flex;align-items:center;gap:9px;font-size:14px;cursor:pointer;border:1px solid #b9c0bb;border-radius:30px;padding:10px 16px 10px 12px;background:#ebe9e1;transition:border-color .2s,background .2s}
.interest-option input{width:17px;height:17px;accent-color:var(--petrol);margin:0;flex-shrink:0}@media(max-width:650px){.interest-option{width:100%}}
.request-choice-group{border:0;margin:0;padding:0;min-width:0}
.request-choice-group legend{font-size:12px;font-weight:700;margin-bottom:7px;padding:0}
.request-choice-group small{font-weight:400}
.request-choice{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px}
.request-choice label{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:400;border:1px solid #b5c0bd;border-radius:20px;padding:8px 12px;cursor:pointer;background:#fff9}
.request-choice input{width:15px;height:15px;accent-color:var(--petrol);margin:0;flex-shrink:0}
.devis-single{max-width:760px;margin:0 auto}
.devis-form-panel{background:radial-gradient(ellipse at 95% 0%,#12546980,transparent 65%),#092b34;color:var(--ivory);border:1px solid #92c1c149;border-radius:24px;padding:clamp(28px,3.4vw,46px)}
.devis-form-panel h2{font-size:clamp(30px,2.6vw,42px);margin-bottom:14px}
.devis-form-panel .interest-fieldset{flex:none;min-width:0}
.devis-form-panel .interest-option{background:#ffffff14;border-color:#92c1c149}
.devis-form-panel .request-choice label{background:#ffffff14;border-color:#92c1c149;color:var(--ivory)}@media(max-width:900px){.devis{padding:70px 6% 80px}}@media(max-width:650px){.devis-form-panel{padding:26px 22px}}
.request-choice label{border-radius:30px}
/* ── Le formulaire de devis, repris à la main le 2026-09-11 ───────────────
   Trois défauts corrigés, constatés sur capture par le client :
   1. le bloc était contenu à 760 px au milieu d'une page large
   2. chaque choix montrait une case À L'INTÉRIEUR d'une pilule : deux formes
      imbriquées qui disent la même chose. La pilule EST le choix désormais.
   3. les champs étaient serrés et sans hiérarchie. */

/* 1 · le bloc suit la largeur du contenu, comme les autres sections */
.devis-single{max-width:none;margin:0;width:100%}
.devis{padding:100px 5.3% 110px}
.devis .interest-options{gap:14px}
.devis input[type=text],.devis input[type=email],
.devis input[type=tel],.devis textarea{
  width:100%;padding:15px 18px;border-radius:12px;font-size:15px}

/* ── Cartes « autres expertises », corrigé à la main le 2026-09-11 ────────
   Deux défauts : la phrase héritait du soulignement du lien qui l'entoure,
   et sa couleur grise était fixe, donc illisible sur le fond bleu que cette
   section prend selon les pages. Elle suit désormais la couleur du contexte
   et seul le libellé du lien reste souligné. */
.related-phrase{color:inherit;opacity:.78;text-decoration:none;display:block}
/* The illustrated workbench is deliberately larger than the original prototype. */
.service-workbench{grid-template-columns:240px minmax(0,1fr);gap:35px}.service-panel{grid-template-columns:minmax(0,1.15fr) minmax(260px,1fr);gap:30px;min-height:0}.panel-art{border-radius:16px;min-height:320px}.panel-art>div{scale:1.15}.panel-copy h3{font-size:30px}.service-selector button{font-size:15px}.clean-hero img{width:100%;height:100%;object-fit:cover}.clean-hero{inset:10px 0 45px 0}.proof-photo{overflow:hidden;border-radius:12px 90px 12px 12px}.proof-photo img{display:block;width:100%;height:430px;object-fit:cover}.métier-stage{background:#123e49;position:relative;overflow:hidden}.métier-stage>div{scale:1;width:100%;min-height:320px;padding:30px}.métier-stage small{font-size:10px;letter-spacing:.1em}.métier-stage b{letter-spacing:-.025em}.event-demo.cycled .event-wall{transform:translateY(0) rotateY(-12deg);opacity:1}.event-demo.cycled .event-plinth,.event-demo.cycled .event-banner{transform:none;opacity:1}.demo-field{display:block;background:#101d23;border:1px solid #5a7b86;padding:12px;font-size:13px;border-radius:5px}.demo-status{display:block;font-size:9px;margin-top:10px;color:#ff9b61}.demo-title{font-size:29px;line-height:1;flex:1;letter-spacing:-1px}.web-hero-demo .demo-title{font-size:36px}.cycled .order-step{background:#ff752624;transform:translateX(5px)}.cycled .order-step:nth-last-child(2){transition-delay:.4s}.cycled .order-step:last-child{transition-delay:.8s}.cycled .work-row{border-color:#ff7526}.cycled .host-unit i{background:#ff7526;box-shadow:0 0 12px #ff7526}.sillon-ecosystem{padding:110px 6%}.sillon-ecosystem .section-head>p:last-child{font-size:18px;max-width:850px;margin-top:30px}.ecosystem-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.ecosystem-card{padding:35px;background:#eaece5;border:1px solid #b8c5be;border-radius:12px}.ecosystem-card>b{font-size:13px;color:#125469;display:block;margin-bottom:25px}.ecosystem-card h3{font-size:29px}.ecosystem-card p{font-size:16px;margin:25px 0;text-align:justify;hyphens:auto}.ecosystem-card>span{display:block;font-size:12px;border-top:1px solid #aebcb5;padding-top:20px}.ecosystem-card strong{font-size:25px;color:#125469}.sillon-performance{display:flex;gap:60px;align-items:center;padding:45px 0;border-bottom:1px solid #b3c1b8}.sillon-performance>div{display:flex;gap:25px;align-items:center;flex-shrink:0}.sillon-performance strong{font-size:95px;letter-spacing:-5px;color:#125469}.sillon-performance span{font-size:16px;line-height:1.5}.sillon-performance p{font-size:12px;max-width:400px;color:#516565}.sillon-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:40px 0}.sillon-benefits h3{font-size:22px;margin-bottom:18px}.sillon-benefits p{font-size:16px}.price-card .price span{font-size:22px}@media(max-width:1100px){.service-workbench{grid-template-columns:200px 1fr}.service-panel{grid-template-columns:1fr}.panel-art{height:440px}.métier-stage>div{min-height:440px}.sillon-performance{gap:30px}.sillon-performance>div{flex-shrink:1}.demo-title{font-size:27px}}@media(max-width:900px){.service-workbench{grid-template-columns:1fr}.service-selector{grid-template-columns:1fr 1fr}.service-panel{grid-template-columns:1fr 1fr}.panel-art>div{scale:1}.sillon-performance{display:block}.ecosystem-card{padding:25px}.web-hero-demo .demo-title{font-size:28px}}@media(max-width:650px){.service-panel{grid-template-columns:1fr}.panel-art{height:auto;min-height:380px}.métier-stage>div{min-height:380px;padding:25px}.ecosystem-grid,.sillon-benefits{grid-template-columns:1fr}.sillon-ecosystem{padding:70px 6%}.sillon-performance>div{gap:15px}.sillon-performance strong{font-size:70px}.sillon-performance span{font-size:13px}.sillon-performance p{margin-top:20px}.proof-photo img{height:320px}.proof-photo{width:100%}.demo-title{font-size:24px}}

.panel-art.métier-stage:has(.event-photo-demo){padding:0}/* Le cadre grandit avec la colonne de texte (338 px quand le texte est long).
   Sans stretch, la photo restait à 320 et laissait voir 9 px de fond bleu en
   haut et en bas. Elle remplit maintenant tout le cadre, quelle qu'en soit la
   hauteur. */
.panel-art.métier-stage{place-items:stretch}.panel-art.métier-stage>.event-photo-demo{position:relative;padding:0;overflow:hidden;min-height:320px;height:100%;width:100%}.event-photo-demo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 2.5s ease}.event-photo-demo.cycled>img{transform:scale(1.055)}.event-photo-shade{position:absolute;inset:0;background:linear-gradient(0deg,#07181de0,transparent 70%)}.event-callout{position:absolute;display:flex;align-items:center;gap:10px;background:#f8f5ed;color:#123641;border-radius:5px;padding:12px 16px;font-size:13px;box-shadow:0 8px 28px #0003;transition:transform .8s,opacity .8s}.event-callout i{font-style:normal;color:#e95608}.event-callout.first{left:8%;top:35%}.event-callout.second{right:6%;bottom:22%;transition-delay:.15s}.event-photo-demo:not(.cycled) .event-callout{transform:translateY(18px);opacity:.35}.event-photo-caption{position:absolute;bottom:26px;left:30px;color:#fff;font-size:11px;letter-spacing:.13em}

/* Web & digital : la tuile orange porte le sigle Sillon, pas une lettre.
   Le gabarit d'origine dimensionne un `b` de 105px pour « Aa. » ; un dessin
   se cale en proportion de la tuile, il ne peut donc jamais la déborder. */
.type-tile--sigle{display:flex;flex-direction:column;justify-content:space-between;text-align:center}.type-tile--sigle .type-sigle{display:block;align-self:center;width:70%;height:auto;margin:10px 0}
/* IA & automatisation : la section de preuve montre le produit lui-même.
   Le cadre garde son coin arrondi, l'image le remplit sans bande de couleur
   autour (la bannière a son propre fond sombre). */
/* la bannière est une image composée : elle se montre entière, jamais recadrée.
   Le cadre prend donc la hauteur de l'image au lieu d'imposer la sienne. */
.proof-marque{background:#0d1014;padding:0;min-height:0;height:auto;display:block}.proof-marque img{display:block;width:100%;height:auto}.proof-liens{display:inline-flex;gap:30px;flex-wrap:wrap}

/* Print : les techniques ne structurent aucun onglet, elles se lisent ici
   comme preuve de ce qui est fait sur place et de ce qui ne l'est pas. */
.atelier-techniques{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;align-items:baseline;margin:30px 0;font-size:13px;line-height:1.5}.atelier-techniques b{font-size:10px;letter-spacing:.12em;font-weight:700;white-space:nowrap}.atelier-techniques span{color:#4c5f64}@media(max-width:650px){.atelier-techniques{grid-template-columns:1fr;gap:4px 0}.atelier-techniques b{margin-top:12px}}
/* Les quatre sections « notre pratique » portent désormais la même photo
   traitée de la même façon : même hauteur, même grand coin arrondi. */
.proof-photo img{height:400px}@media(max-width:900px){.proof-photo img{height:320px}}


/* ── Harmonisation du formulaire de devis ────────────────────────────────
   Trois défauts constatés à la mesure sur les six pages :

   1. « Votre nom » et « Votre entreprise » sont des <input> SANS attribut
      type. La règle du site les visait par input[type=text], qui ne les
      atteint donc pas : ils retombaient sur le style générique et faisaient
      44 px de haut, rayon 7, texte 13 px, à côté d'un e-mail à 49 px,
      rayon 12, texte 15 px. On vise désormais par exclusion.
   2. Les pastilles de « ce qui m'intéresse » avaient 14 px d'écart, celles
      des deux questions suivantes 0 et 8. Même écart partout.
   3. La légende « CE QUI M'INTÉRESSE » sortait en orange (.devis-form-panel
      .eyebrow) quand les deux autres légendes sont ivoire.               */
/* la forme des champs vit dans contact-global.css, chargé par toutes les pages */

.devis .contact-form .choice-options,
.devis .contact-form .request-choice{display:flex;flex-wrap:wrap;gap:14px}
/* Les pastilles portent aussi trois formes différentes selon le groupe :
   hauteur, rayon et taille de texte alignés sur celles de « ce qui
   m'intéresse », qui sont les plus grandes. */
.devis .contact-form .choice-options label,
.devis .contact-form .request-choice label{border-radius:30px;padding:0 22px;
  min-height:46px;font-size:14px}

.devis .contact-form fieldset legend{
  color:var(--ivory);font-size:12px;font-weight:700;letter-spacing:.04em;
  margin-bottom:10px;padding:0}
.devis .contact-form fieldset legend .facultatif{font-weight:400;opacity:.7}