/* ================================================================== PAGE CRÉATION DE SITES — vocabulaire de composition « plan d'architecte » Système graphique identique à l'accueil;en-tête `.phead` commun aux pages intérieures;toutes les autres structures sont inédites. Motifs:cartouche · cotation · plan coté vertical · vue éclatée · feuilles de plan · cote variable. ================================================================== */ .nav-links a[aria-current="page"]::after{transform:scaleX(1)}.nav-panel a[aria-current="page"]{background:var(--ivoire-2)}:root{--gut:5.5rem;/* Camel « encre »:même teinte que --accent-deep (H 34° S 33%) assombri à L 34%. Réservé aux petits labels capitales sur fond clair,où le camel normal tombe à 2,24:1 (WCAG AA exige 4,5:1). Celui-ci donne 4,74:1. */ --accent-ink:#735B3A}@media(max-width:900px){:root{--gut:3rem}}/* ---------- EN-TÊTE DE PAGE (gabarit commun,repris de la page Santé) ------ */ .phead{padding-top:clamp(7.5rem,15vh,10.5rem);padding-bottom:0}.phead__in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(2rem,4vw,4rem);align-items:center;padding-bottom:clamp(2.6rem,5vh,3.6rem);border-bottom:1px solid var(--line-strong)}@media(max-width:900px){.phead__in{grid-template-columns:1fr;gap:2.2rem;align-items:start}}.phead__t{font-size:clamp(2.2rem,4.6vw,4.1rem);line-height:1.05;margin-top:1.5rem}.phead__t .it{color:var(--accent-deep)}.phead__meta{margin-top:1.7rem;font-size:1.05rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}.phead__aside{padding-bottom:0}.phead__s{color:var(--ink-2);font-size:1.18rem;max-width:38ch}.phead__cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.9rem}.somm{border-bottom:1px solid var(--line-strong)}.somm__in{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.8rem);flex-wrap:wrap;padding-block:clamp(2.1rem,4vh,3rem)}.somm__l{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);flex:0 0 auto}.somm__in a{display:inline-flex;align-items:baseline;gap:.5rem;font-size:1.12rem;transition:color .25s}.somm__in a i{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--accent-deep)}.somm__in a:hover{color:var(--accent-deep)}.crumb{display:flex;align-items:center;gap:.6rem;margin-bottom:1.4rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}.crumb a{transition:color .25s}.crumb a:hover{color:var(--accent-deep)}.crumb i{font-style:normal;color:var(--accent)}/* ---------- CARTOUCHE:l'en-tête de section de cette page ---------------- */ /* Sur un plan d'architecte,le cartouche est le bloc qui identifie la feuille. Ici il remplace le numéro suspendu en marge de la page Santé. */ .csec{padding-block:clamp(5rem,11vh,9rem)}.csec--tone{background:var(--ivoire-2)}.cart{display:flex;align-items:stretch;flex-wrap:wrap;border:1px solid var(--line-strong);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase}.cart__no{font-family:var(--serif);font-style:italic;font-size:1.5rem;letter-spacing:0;text-transform:none;color:var(--accent-deep);padding:.55rem 1.1rem;border-right:1px solid var(--line-strong);display:flex;align-items:center;line-height:1}.cart__l{padding:.55rem 1.2rem;display:flex;align-items:center;font-weight:600;color:var(--aubergine);flex:1 1 auto}.cart__t{font-size:clamp(1.9rem,3.4vw,3rem);margin-top:1.6rem;max-width:24ch}.cart__t .it{color:var(--accent-deep)}/* titre court qui doit tenir sur une seule ligne sur ordinateur */ .cart__t--1l{max-width:46ch}.cart__chapo{color:var(--ink-2);font-size:1.14rem;margin-top:1.1rem;max-width:62ch}/* ---------- COTATION:le filet à deux embouts ---------------------------- */ .cote{position:relative;height:1px;background:var(--line-strong)}.cote::before,.cote::after{content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--line-strong)}.cote::before{left:0}.cote::after{right:0}/* ---------- 01 LE PRINCIPE:corps + cotation de marge -------------------- */ .prin{display:grid;grid-template-columns:var(--gut) minmax(0,62ch) minmax(0,1fr);gap:clamp(1rem,2.5vw,2.5rem);margin-top:clamp(2.4rem,5vh,3.4rem)}@media(max-width:1080px){.prin{grid-template-columns:var(--gut) minmax(0,1fr)}}@media(max-width:640px){.prin{grid-template-columns:1fr}}/* la cotation verticale « mesure » le raisonnement:clin d'œil au plan coté */ .prin__cote{grid-column:1;justify-self:center;width:1px;background:var(--line-strong);position:relative;margin-block:.6rem}.prin__cote::before,.prin__cote::after{content:"";position:absolute;left:-5px;width:11px;height:1px;background:var(--line-strong)}.prin__cote::before{top:0}.prin__cote::after{bottom:0}@media(max-width:640px){.prin__cote{display:none}}.prin__body{grid-column:2}@media(max-width:640px){.prin__body{grid-column:1}}.prin__body p{color:var(--ink-2);font-size:1.14rem}.prin__body p + p{margin-top:1.1em}.prin__body b{font-weight:500;color:var(--aubergine)}.prin__note{grid-column:3;align-self:center;font-size:1.08rem;color:var(--ink-2);line-height:1.6}.prin__note b{display:block;font-family:var(--serif);font-style:italic;font-weight:400;color:var(--aubergine);font-size:1.32rem;margin-bottom:.5rem}@media(max-width:1080px){.prin__note{grid-column:2;margin-top:2.2rem;max-width:52ch}}@media(max-width:640px){.prin__note{grid-column:1}}/* ---------- le relevé de l'existant:les situations de la cible ---------- */ /* Un architecte relève l'existant avant de dessiner. Ici,les situations qui amènent une entreprise à faire ou refaire son site. Case à cocher plutôt que puce:le lecteur y coche mentalement ce qui le concerne. */ .etat{grid-column:2/4;margin-top:3rem;border:1px solid var(--aubergine);background:var(--ivoire-2);padding:clamp(1.6rem,2.6vw,2.3rem)}@media(max-width:1080px){.etat{grid-column:2}}@media(max-width:640px){.etat{grid-column:1}}.etat h3{font-size:1.45rem;margin-bottom:1.3rem}.etat__l{list-style:none;display:grid;gap:1.1rem}.etat__l li{display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.9rem;color:var(--ink-2);font-size:1.09rem;line-height:1.55}/* pastille camel pleine,identique à celle de la page Santé:c'est un détail du système graphique,pas une composition. Il tient les deux pages ensemble. */ .etat__l li::before{content:"";width:6px;height:6px;margin-top:.62em;justify-self:center;background:var(--accent);border-radius:50%}.etat__l b{font-weight:500;color:var(--aubergine)}/* ---------- 02 LA MÉTHODE:fond de plan + plan coté vertical ------------- */ .fond{background:var(--aubergine);color:var(--ivoire);padding-block:clamp(5rem,11vh,9rem);position:relative;overflow:hidden}/* trame de papier millimétré,très atténuée:le fond de plan de l'atelier */ .fond::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(to right,rgba(201,168,127,.15) 0 1px,transparent 1px 100%),repeating-linear-gradient(to bottom,rgba(201,168,127,.15) 0 1px,transparent 1px 100%);background-size:68px 68px;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent)}.fond .wrap{position:relative;z-index:1}.fond .cart{border-color:rgba(201,168,127,.5)}.fond .cart__no{color:var(--accent);border-right-color:rgba(201,168,127,.5)}.fond .cart__l{color:var(--ivoire)}.fond .cart__t .it{color:var(--accent)}.fond .cart__chapo{color:rgba(237,231,221,.78)}.plan{list-style:none;position:relative;margin-top:clamp(2.6rem,5vh,3.6rem)}/* ligne de cote verticale,continue,qui traverse les 4 temps */ .plan::before{content:"";position:absolute;top:.4rem;bottom:.4rem;left:calc(var(--gut) / 2);width:1px;background:rgba(201,168,127,.45)}@media(max-width:640px){.plan::before{display:none}}.plan__t{display:grid;grid-template-columns:var(--gut) minmax(0,1fr);gap:clamp(1.2rem,3vw,2.4rem);padding-block:clamp(1.6rem,3.2vh,2.4rem);position:relative}@media(max-width:640px){.plan__t{grid-template-columns:1fr;gap:.5rem}}.plan__n{font-family:var(--serif);font-style:italic;font-size:2.1rem;line-height:1;color:var(--accent);text-align:center;justify-self:center;/* le pavé opaque interrompt la ligne de cote:le numéro s'y pose dessus */ background:var(--aubergine);padding-block:.45rem;position:relative;z-index:1}@media(max-width:640px){.plan__n{justify-self:start;background:none;padding:0}}.plan__c h3{font-family:var(--serif);font-size:clamp(1.35rem,2.2vw,1.75rem);letter-spacing:.015em;margin-bottom:.7rem}.plan__c p{color:rgba(237,231,221,.82);font-size:1.09rem;max-width:64ch}.plan__c b{color:var(--ivoire);font-weight:500}/* ---------- 03 LE PÉRIMÈTRE:vue éclatée à lignes de rappel -------------- */ .ecl{list-style:none;margin-top:clamp(2.4rem,5vh,3.4rem);border-top:1px solid var(--line-strong)}.ecl__i{display:flex;align-items:baseline;padding-block:clamp(1.1rem,2.2vh,1.5rem);border-bottom:1px solid var(--line)}.ecl__n{flex:0 0 auto;width:2.6rem;font-family:var(--serif);font-style:italic;font-size:1.45rem;color:var(--accent-deep);line-height:1}/* ligne de rappel:sa longueur croît d'un cran à chaque pièce,ce qui produit l'escalier caractéristique d'une vue éclatée. --i est posé dans le HTML. */ .ecl__ld{flex:0 0 auto;align-self:center;position:relative;height:1px;background:var(--line-strong);margin-right:1.1rem;width:calc(.9rem + var(--i,0) * .85rem)}.ecl__ld::after{content:"";position:absolute;right:0;top:-3px;width:1px;height:7px;background:var(--line-strong)}@media(max-width:760px){.ecl__ld{display:none}}.ecl__c{flex:1 1 auto;min-width:0}.ecl__c h3{font-size:1.2rem;font-family:var(--sans);font-weight:500;letter-spacing:0}/* 88ch:la ligne remplit mieux la feuille sans devenir trop longue à suivre. Au-delà,l'œil perd le début de la ligne suivante. */ .ecl__c p{color:var(--ink-2);font-size:1.06rem;margin-top:.35rem;max-width:88ch}/* nomenclature des formats,en bas de la vue éclatée */ .fmt{display:grid;grid-template-columns:var(--gut) minmax(0,1fr);gap:clamp(1.2rem,3vw,2.4rem);margin-top:clamp(2.2rem,4vh,3rem);/* le libellé passe sur 2 lignes:on le centre face à la rangée d'encarts */ align-items:center}@media(max-width:640px){.fmt{grid-template-columns:1fr;gap:.8rem}}.fmt__l{font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink)}.fmt__list{display:flex;flex-wrap:wrap;gap:.6rem}.fmt__list span{border:1px solid var(--line-strong);padding:.55rem 1.1rem;font-size:1.04rem}/* ---------- 04 LES RÉALISATIONS:feuilles de plan ------------------------ */ .feux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.2rem);margin-top:clamp(2.4rem,5vh,3.4rem)}@media(max-width:860px){.feux{grid-template-columns:1fr}}.feu{border:1px solid var(--line-strong);background:var(--ivoire);display:flex;flex-direction:column;overflow:hidden}.feu__fig{display:block;overflow:hidden;background:var(--ivoire-2);border-bottom:1px solid var(--line-strong)}.feu__fig img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .8s cubic-bezier(.22,.61,.36,1)}.feu:hover .feu__fig img{transform:scale(1.03)}/* le cartouche de la feuille:en bas,comme sur un plan */ .feu__cart{padding:clamp(1.2rem,2.2vw,1.7rem);display:flex;flex-direction:column;flex:1 1 auto}.feu__k{display:block;padding-bottom:.7rem;margin-bottom:1rem;border-bottom:1px solid var(--line);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}.feu__n{font-family:var(--serif);font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.15}.feu__d{color:var(--ink-2);font-size:1.06rem;margin-top:.8rem}/* lien sortant vers le site en ligne,sous la description */ .feu__u{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;font-size:1rem;color:var(--accent-ink);border-bottom:1px solid var(--line-strong);padding-bottom:.2rem;align-self:flex-start;transition:color .25s,border-color .25s}.feu__u:hover{color:var(--aubergine);border-color:var(--aubergine)}/* le portfolio ne se limite pas à ces 4 cas:la sortie vers la galerie complète,posée face au titre plutôt qu'en fin de section */ .feux__head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.5rem,4vw,3rem);align-items:center}@media(max-width:860px){.feux__head{grid-template-columns:1fr;gap:1.6rem}}@media(max-width:860px){.feux__cta{justify-self:start}}/* ---------- 05 VOTRE DEVIS:la cote variable ---------------------------- */ .varc{margin-top:clamp(2.4rem,5vh,3.4rem);border-top:1px solid var(--line-strong)}.varc__r{display:grid;grid-template-columns:minmax(0,22ch) 7rem minmax(0,1fr);gap:clamp(1.2rem,3vw,2.4rem);align-items:center;padding-block:clamp(1.3rem,2.6vh,1.8rem);border-bottom:1px solid var(--line)}@media(max-width:860px){.varc__r{grid-template-columns:1fr;gap:.5rem;align-items:start}.varc__m{display:none}}.varc__k{font-family:var(--serif);font-size:1.3rem;line-height:1.3}/* cote dont la mesure reste ouverte:aucun prix n'est affiché sur cette page */ .varc__m{position:relative;height:1px;background:var(--line-strong)}.varc__m::before,.varc__m::after{content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--line-strong)}.varc__m::before{left:0}.varc__m::after{right:0}/* le « ? » est du petit texte (18 px):en camel normal il tomberait à 2,24:1 alors que WCAG AA exige 4,5:1 sous 24 px. --accent-ink donne 4,74:1 sur sable. */ .varc__m i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--ivoire);padding:0 .5rem;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--accent-ink)}.csec--tone .varc__m i{background:var(--ivoire-2)}.varc__d{color:var(--ink-2);font-size:1.06rem}/* nota:le bloc de notes d'un plan. Ici,l'engagement sur le prix,en aubergine pour le détacher du tableau. Texte en ivoire PLEIN (13,48:1) et non atténué. */ .nota{background:var(--aubergine);color:var(--ivoire);padding:clamp(1.6rem,2.6vw,2.2rem);margin-top:clamp(2.2rem,4vh,3rem)}.nota__l{display:block;font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem}/* Zone de texte unique,sur toute la largeur de l'encart (choix de Lucie). */ .nota p{color:var(--ivoire);font-size:1.06rem}.nota p + p{margin-top:.9em}.nota b{font-weight:500}/* ---------- 06 LES QUESTIONS:chaque Q&R est une petite feuille ---------- */ /* Composition propre à cette page:le numéro est enfermé dans une case,comme dans le cartouche de section. Rien à voir avec l'accordéon de la page Santé,où le chiffre romain est suspendu dans la marge. */ .qst{margin-top:clamp(2.4rem,5vh,3.4rem);display:grid;gap:.9rem}.qst details{border:1px solid var(--line-strong);background:var(--ivoire)}.qst summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:stretch}.qst summary::-webkit-details-marker{display:none}.qst__n{font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1;color:var(--accent-deep);padding:1rem 1.1rem;border-right:1px solid var(--line-strong);display:flex;align-items:center}/* 🚨 Masquer le numéro ne suffit pas:un enfant en `display:none` ne réserve pas sa colonne de grille. La question glissait dans la colonne `auto` (à largeur de contenu) et le « + » dans la `1fr`,expulsé hors de la boîte dès que la question était longue → débord de toute la page,vu par Lucie sur iPhone le 21/07/2026. On redéfinit donc les colonnes SANS celle du numéro. */ @media(max-width:560px){.qst__n{display:none}.qst summary{grid-template-columns:minmax(0,1fr) auto}}.qst__q{font-family:var(--serif);font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.3;letter-spacing:.015em;padding:1rem 1.2rem;display:flex;align-items:center;transition:color .3s}.qst summary:hover .qst__q{color:var(--accent-deep)}.qst__s{padding:1rem 1.2rem;color:var(--accent);font-size:1.45rem;line-height:1;display:flex;align-items:center;transition:transform .35s}.qst details[open] .qst__s{transform:rotate(45deg)}.qst__a{padding:1.3rem 1.4rem 1.5rem;border-top:1px solid var(--line)}.qst__a p{color:var(--ink-2);font-size:1.06rem}.qst__a p + p{margin-top:.9em}/* ---------- RENVOI vers les autres prestations ---------------------------- */ .renv{border-block:1px solid var(--line-strong)}.renv__in{display:grid;grid-template-columns:9rem minmax(0,1fr) auto;gap:clamp(1rem,2.5vw,2.5rem);align-items:center;padding-block:clamp(2.8rem,5.5vh,4rem)}@media(max-width:980px){.renv__in{grid-template-columns:9rem minmax(0,1fr)}}@media(max-width:640px){.renv__in{grid-template-columns:1fr;gap:1.2rem}}.renv__l{font-size:.95rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink);align-self:start;padding-top:.45rem}.renv__t{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,3rem);max-width:22ch;line-height:1.18}.renv__t .it{color:var(--accent-deep)}.renv__d{color:var(--ink-2);font-size:1.08rem;margin-top:.9rem;max-width:62ch}.renv__d + .renv__d{margin-top:.8em}.renv__list{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}.renv__list span{border:1px solid var(--line-strong);padding:.5rem 1rem;font-size:1.04rem}@media(max-width:980px){.renv__cta{grid-column:2;justify-self:start;margin-top:.5rem}}@media(max-width:640px){.renv__cta{grid-column:1}}