/* * Gabarit « Accueil ». Chargé uniquement sur ce gabarit (functions.php). * Référence : maquettes/maquette-2c-photographique.html. * Règle de spécificité : deux classes, ou une classe et un élément. * Tailles fixes en rem (racine 16 px). */ /* ---------- En-tête transparent au-dessus du bandeau (Eric, 20/10/2026) ---------- * ACCUEIL SEULEMENT (cette feuille n'est chargée que sur ce gabarit), et * SEULEMENT au défilement zéro (deuxième passe, décision d'Eric) : le bandeau * monte derrière l'en-tête, sans fond, texte et monogramme en blanc. Dès le * premier pixel de défilement, la classe entete-detachee (posée par * assets/js/menu.js, défilement > 0) rend à l'en-tête son apparence pleine. Trois états, sans chevauchement : * zéro = transparent ; descente = caché ; remontée = plein et visible. * Superposition SANS connaître la hauteur de l'en-tête : en-tête et
* partagent la même cellule de grille (aucun décalage de mise en page). * Monogramme blanc : mêmes 19 tracés que assets/monogramme-blanc.svg, seule * la couleur change (#101315 → #FFF) : obtenu par fill, aucun fichier ni * requête. * Lisibilité : DÉGRADÉ court, 20 % de noir en haut, 12 % à 70 px (bas du * texte), nul à 120 px. Mesuré sur les trois images à 1440, 820 et 390 px * (contraste du blanc au contact des lettres) : 4,72:1 au pire (image 2, * 1440 px). Moins visible que le voile précédent (0,34 sur toute la hauteur * de l'en-tête) ; l'ombre portée seule échoue (4,40:1 au mieux) et se voit sur * les lettres. Rapport : docs/rapport-entete-menu-2026-10-20.md. Marge * faible : toute nouvelle image du bandeau se remesure. */ .page-template-page-accueil .wp-site-blocks{display:grid;grid-template-columns:minmax(0,1fr)} .page-template-page-accueil .wp-site-blocks > *{grid-column:1;min-width:0} .page-template-page-accueil .wp-site-blocks > .wp-block-template-part:has(> .entete){grid-row:1;align-self:start; --voile-entete:.2;transition:transform .35s var(--wp--custom--courbe),box-shadow .35s,background-color .3s} .page-template-page-accueil .wp-site-blocks > main{grid-row:1;margin-block-start:0} .page-template-page-accueil .wp-block-group.bandeau{margin-top:0} .page-template-page-accueil .wp-site-blocks > .wp-block-template-part:has(> .entete)::before{content:"";position:absolute;left:0;right:0;top:0;height:7.5rem; z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s; background:linear-gradient(180deg,rgba(10,11,12,var(--voile-entete)) 0,rgba(10,11,12,calc(var(--voile-entete) * .6)) 4.375rem,rgba(10,11,12,0) 7.5rem)} .page-template-page-accueil .wp-site-blocks > .wp-block-template-part:has(> .entete):not(.entete-detachee){background-color:transparent;box-shadow:none} .page-template-page-accueil .wp-site-blocks > .wp-block-template-part:has(> .entete):not(.entete-detachee)::before{opacity:1} .page-template-page-accueil .entete .wp-block-site-title,.page-template-page-accueil .entete .wp-block-site-tagline,.page-template-page-accueil #navigation a, .page-template-page-accueil .bouton-menu .wp-block-button__link,.page-template-page-accueil .entete .monogramme path{transition:color .3s,fill .3s,border-color .3s} .page-template-page-accueil .wp-block-template-part:not(.entete-detachee) .entete .wp-block-site-title, .page-template-page-accueil .wp-block-template-part:not(.entete-detachee) .entete .wp-block-site-tagline, .page-template-page-accueil .wp-block-template-part:not(.entete-detachee) .bouton-menu .wp-block-button__link{color:#fff} .page-template-page-accueil .wp-block-template-part:not(.entete-detachee) .entete .monogramme path{fill:#fff} /* ---------- Bandeau : fondu enchaîné (script assets/js/fondu.js) ---------- */ .wp-block-group.bandeau{position:relative;height:min(78vh,720px);margin-top:34px;overflow:hidden;background:#B4BBBC} .bandeau .wp-block-image{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1s ease} .bandeau .wp-block-image img{width:100%;height:100%;object-fit:cover;object-position:center 44%} .bandeau .wp-block-image.actif, .bandeau:not(.fondu-actif) .wp-block-image:first-child{opacity:1} .wp-block-group.bandeau::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(16,19,21,.18) 0,rgba(16,19,21,0) 38%,rgba(16,19,21,.42) 68%,rgba(16,19,21,.78) 100%)} /* Commandes du bandeau (Eric, 19/10/2026) : flèche, compteur, flèche, sur une ligne à elles, au-dessus de la légende (jamais en travers). Sous 820 px : en haut à droite. Le compteur indique la position ; ses barres restent cliquables. */ .bandeau .commandes{position:absolute;right:40px;bottom:calc(34px + 2.25rem);z-index:3;display:flex;align-items:center;gap:.75rem} .compteur{display:flex;gap:7px;align-items:center} .compteur i{display:block;width:46px;height:2px;background:rgba(241,243,242,.3);overflow:hidden} .compteur i b{display:block;width:100%;height:100%;background:var(--wp--preset--color--clair);transform:scaleX(0);transform-origin:left} /* Compteur pilotable (Eric, 19/10/2026) : chaque barre est un bouton. Zone de clic de 44 px de haut, barre visible au même endroit qu'avant (décalage compensé). Glisser au doigt : vertical laissé au navigateur (touch-action). */ .wp-block-group.bandeau{touch-action:pan-y pinch-zoom} .bandeau p.libelle-compteur,.bandeau p.libelle-precedent,.bandeau p.libelle-suivant,.bandeau p.libelle-pause,.bandeau p.libelle-lecture{display:none} .compteur button{display:block;margin:0;padding:1.3125rem 0;border:0;background:none;cursor:pointer} .compteur button:hover i{background:rgba(241,243,242,.6)} .compteur button:focus-visible{outline:2px solid var(--wp--preset--color--clair);outline-offset:2px} .bandeau .dit{position:absolute;left:40px;right:40px;bottom:34px;z-index:2;gap:30px;align-items:flex-end;color:var(--wp--preset--color--clair)} .bandeau .dit p{margin:0;font-size:clamp(1.25rem,2.6vw,2rem);font-weight:300;letter-spacing:-.025em;line-height:1.15;max-width:22ch;color:inherit} .bandeau .dit p.credit{max-width:none;font-family:var(--wp--preset--font-family--mono);font-size:.625rem;letter-spacing:.1em;line-height:normal;opacity:.85} /* ---------- Tuiles métiers ---------- */ /* Cinq cartes depuis le 20/10/2026 (immobilier et gîtes : deux métiers, Eric) : une bande de 5 au-delà de 1180 px, 3 puis 2 jusqu'à 821 px, une colonne en dessous. */ .wp-block-group.metiers{grid-template-columns:repeat(5,1fr);gap:3px;margin-top:3px} .metiers .tuile{position:relative;aspect-ratio:3/2;overflow:hidden;display:block;background:#2A3237} .tuile .wp-block-image{position:absolute;inset:0;margin:0} .tuile .wp-block-image img{width:100%;height:100%;object-fit:cover;transition:transform 1.05s var(--wp--custom--courbe)} .tuile:hover .wp-block-image img{transform:scale(1.05)} .metiers .tuile::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(0,0,0,.68))} .tuile .lab{position:absolute;z-index:2;left:20px;right:20px;bottom:18px;color:var(--wp--preset--color--clair)} .tuile h2{font-size:.9375rem;font-weight:500;letter-spacing:.01em;line-height:normal;color:inherit} /* Le lien du titre couvre toute la tuile. */ .tuile h2 a::after{content:"";position:absolute;inset:-100vh -100vw;z-index:3} .tuile .lab{overflow:visible} .metiers .tuile{isolation:isolate} .tuile p.precision{display:block;margin:5px 0 0;max-width:none;font-family:var(--wp--preset--font-family--mono);font-size:.625rem;line-height:normal;color:rgba(241,243,242,.72)} /* ---------- Introduction : H1, texte, fiches ---------- */ .wp-block-group.intro{grid-template-columns:1fr 1.25fr;gap:60px;padding:96px 0 84px;align-items:start} .intro h1{font-size:clamp(1.9rem,4vw,3.1rem);font-weight:200;line-height:1.08;letter-spacing:-.035em;max-width:13ch} .intro h1 strong{font-weight:500} /* Titre collant (Eric, 20/10/2026) : la colonne de gauche (le H1, 161 px) * reste à l'écran le long de la colonne de droite (929 px) au lieu de * laisser un vide. align-self:start est obligatoire : sinon la grille étire * le titre sur toute la hauteur et il ne colle jamais. Décalage de 48 px * quand l'en-tête est rétracté ; en-tête affiché (on remonte), le titre * passe dessous l'en-tête au lieu d'être recouvert. Aucun contenu ajouté. * Désactivé à 820 px et moins, où les colonnes se replient. */ @media (min-width:821px){ .wp-block-group.intro > h1{position:sticky;top:calc(var(--wp-admin--admin-bar--height,0px) + var(--hauteur-entete,4.625rem) + 1.5rem);align-self:start;transition:top .35s var(--wp--custom--courbe)} .wp-site-blocks:has(> .entete-cachee) .wp-block-group.intro > h1{top:3rem} } .wp-block-group.d-grille{grid-template-columns:1.32fr .68fr;gap:48px;align-items:start} .wp-block-group.d-texte{font-size:.90625rem;line-height:1.92;max-width:60ch} .d-texte p{font-size:.90625rem;line-height:1.92;color:var(--wp--preset--color--encre-douce);max-width:60ch} .d-texte p + p{margin-top:15px} .d-texte p.amorce{font-size:clamp(1.15rem,1.75vw,1.32rem);line-height:1.55;letter-spacing:-.02em;color:var(--wp--preset--color--encre);font-weight:300;margin-bottom:20px;max-width:44ch} .d-texte p a{border-bottom:1px solid var(--wp--preset--color--filet)} .d-texte p a:hover{border-color:var(--wp--preset--color--encre)} .wp-block-group.d-fiches{display:flex;flex-direction:column;gap:2px;position:sticky;top:34px} .d-fiches .d-fiche{background:var(--wp--preset--color--papier-2);padding:19px 21px;transition:background .35s} .d-fiches .d-fiche:hover{background:var(--wp--preset--color--survol)} .d-fiche p{margin:0;max-width:none;line-height:normal} .d-fiche p.cat{display:block;font-family:var(--wp--preset--font-family--mono);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wp--preset--color--ardoise);margin-bottom:9px} .d-fiche p.chiffre{display:block;font-size:1.4rem;font-weight:300;letter-spacing:-.03em;margin-bottom:6px;line-height:1.1;color:var(--wp--preset--color--encre)} .d-fiche p.det{display:block;font-family:var(--wp--preset--font-family--mono);font-size:.625rem;letter-spacing:.03em;color:var(--wp--preset--color--gris);line-height:1.65} .wp-block-list.d-mots{display:flex;flex-wrap:wrap;gap:6px;margin:28px 0 0;padding:22px 0 0;border-top:1px solid var(--wp--preset--color--filet);list-style:none} .d-mots li{font-size:inherit;line-height:normal} .d-mots a{display:inline-block;line-height:1.92;font-family:var(--wp--preset--font-family--mono);font-size:.65625rem;letter-spacing:.04em;color:var(--wp--preset--color--gris); border:1px solid var(--wp--preset--color--filet);padding:7px 12px;transition:border-color .3s,color .3s} .d-mots a:hover{border-color:var(--wp--preset--color--encre);color:var(--wp--preset--color--encre)} /* ---------- Titres de section ---------- */ .wp-block-group.titre-sec{align-items:baseline;gap:24px;padding-bottom:16px} .titre-sec h2{font-size:clamp(1.15rem,2.2vw,1.6rem);font-weight:400;letter-spacing:-.025em;line-height:normal} .titre-sec p{margin:0;max-width:none;line-height:normal} /* Le paragraphe prend la police du lien : même boîte de ligne que le lien seul de la maquette. */ .titre-sec p.lien-sec{font-family:var(--wp--preset--font-family--mono);font-size:.65625rem} .titre-sec p.lien-sec a{display:block;font-family:var(--wp--preset--font-family--mono);font-size:.65625rem;color:var(--wp--preset--color--gris);border-bottom:1px solid var(--wp--preset--color--filet)} .titre-sec p.lien-sec a:hover{color:var(--wp--preset--color--encre)} /* ---------- Index des reportages ---------- * Solution A (par défaut) : pas d'aperçu au survol, vignettes de 210 px, * rien ne bouge ni ne recouvre, identique au doigt. Solution B : style * « Panneau d'aperçu » sur le groupe « reportages » (éditeur), panneau fixe à * droite hors du tableau (assets/js/panneau.js), à partir de 1100 px avec * souris. La ligne entière est le lien du projet (lien étiré). */ .wp-block-group.index{border-top:1px solid var(--wp--preset--color--filet);position:relative} .index .entete-index,.index .ligne{grid-template-columns:210px 1fr 200px 146px 70px;gap:20px} .index .entete-index{padding:11px 0;border-bottom:1px solid var(--wp--preset--color--filet)} .entete-index p{margin:0;max-width:none;font-family:var(--wp--preset--font-family--mono);font-size:.59375rem;letter-spacing:.13em;text-transform:uppercase;color:var(--wp--preset--color--gris);line-height:normal} .entete-index p:first-child{grid-column:2} .index .ligne{align-items:center;padding:14px 0;border-bottom:1px solid var(--wp--preset--color--filet);position:relative;z-index:2} /* Retrait gauche PERMANENT du contenu de la ligne (et de l'en-tête, pour garder * les colonnes alignées) : filet de 3 px + 11 px d'écart. Le filet de la ligne * active ne recouvre plus la première lettre, et rien ne bouge quand il * apparaît (recette d'Eric, 19/10/2026). */ .index .entete-index,.index .ligne{padding-left:.875rem} .index .ligne::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:1;background:var(--wp--preset--color--ardoise);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--wp--custom--courbe)} .index .ligne:hover::before,.index .ligne:focus-within::before{transform:scaleY(1)} .ligne .wp-block-image{display:block;width:210px;aspect-ratio:3/2;margin:0;overflow:hidden;background:var(--wp--preset--color--attente)} .ligne .wp-block-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--wp--custom--courbe)} /* Agrandissement DANS le cadre de la vignette : rien ne déborde sur les lignes voisines. */ .ligne:hover .wp-block-image img{transform:scale(1.05)} .ligne p{margin:0;max-width:none;line-height:normal} .ligne p.projet{font-size:clamp(1rem,1.85vw,1.4rem);font-weight:400;letter-spacing:-.018em;line-height:1.15;color:var(--wp--preset--color--encre)} /* Le lien du projet couvre toute la ligne : vignette, titre, lieu, typologie, année. */ .ligne p.projet a::after{content:"";position:absolute;inset:0} .ligne:hover p.projet a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em} /* Focus clavier : contour sur la ligne entière, puisque c'est elle qui est le lien. */ .ligne p.projet a:focus-visible{outline:none} .index .ligne:has(a:focus-visible){outline:1.5px solid var(--wp--preset--color--ardoise);outline-offset:3px} .ligne p.agence,.ligne p.type,.ligne p.an{font-family:var(--wp--preset--font-family--mono);font-size:.6875rem;color:var(--wp--preset--color--gris)} .ligne p.an{text-align:right} .ligne:hover p.agence,.ligne:hover p.type,.ligne:hover p.an{color:var(--wp--preset--color--encre)} /* Index des derniers articles (bloc Requête natif, 20/10/2026) : quatre * colonnes au lieu de cinq (vignette, article, catégorie, année ; aucun lieu * dans les articles). Mêmes filets, mêmes corps, même lien étiré. */ .index-articles .wp-block-post-template{list-style:none;margin:0;padding:0} .index-articles .wp-block-post-template > li{margin:0} .index.index-articles .entete-index,.index.index-articles .ligne{grid-template-columns:210px 1fr 200px 70px} .index-articles .ligne .wp-block-post-featured-image{grid-column:1;display:block;width:210px;aspect-ratio:3/2;margin:0;overflow:hidden;background:var(--wp--preset--color--attente)} .index-articles .ligne .wp-block-post-featured-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--wp--custom--courbe)} .index-articles .ligne:hover .wp-block-post-featured-image img{transform:scale(1.05)} /* Article sans aucune image : la ligne garde ses colonnes. */ .index-articles .ligne p.projet{grid-column:2;margin:0} .index-articles .ligne .wp-block-post-date{font-family:var(--wp--preset--font-family--mono);font-size:.6875rem;color:var(--wp--preset--color--gris);text-align:right;line-height:normal} .index-articles .ligne:hover .wp-block-post-date{color:var(--wp--preset--color--encre)} /* Solution B : panneau d'aperçu fixe à droite (colonne réservée d'emblée : aucun décalage à l'arrivée du panneau). */ @media (min-width:1100px) and (hover:hover){ .wp-block-group.reportages.is-style-panneau{display:grid;grid-template-columns:minmax(0,1fr) 32%;column-gap:48px;align-items:start} .is-style-panneau > .titre-sec{grid-column:1/-1} .is-style-panneau > .index{grid-column:1} .is-style-panneau .index .entete-index,.is-style-panneau .index .ligne{grid-template-columns:210px 1fr 130px 110px 52px;gap:16px} .is-style-panneau > .panneau{grid-column:2;grid-row:2;position:sticky;top:calc(var(--hauteur-entete,0px) + 24px);margin:0} .panneau picture,.panneau img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--wp--preset--color--attente)} .panneau img{animation:psb-apparition .3s ease} .panneau figcaption{padding:12px 2px 0;font-size:.84375rem;letter-spacing:-.012em;line-height:normal;color:var(--wp--preset--color--encre)} .panneau figcaption span{display:block;margin-top:4px;font-family:var(--wp--preset--font-family--mono);font-size:.65625rem;color:var(--wp--preset--color--gris)} } @keyframes psb-apparition{from{opacity:0}to{opacity:1}} /* Solution B entre 1100 et 1180 px : la typologie est masquée (règle des * 1180 px), la grille passe donc à 4 colonnes, vignette de 180 px. Sans cela, * l'année tombait dans la colonne de la typologie et l'en-tête se décalait * (corrigé le 19/10/2026). */ @media (min-width:1100px) and (max-width:1180px) and (hover:hover){ .is-style-panneau .index .entete-index,.is-style-panneau .index .ligne{grid-template-columns:180px 1fr 130px 52px} } @media (min-width:1100px) and (hover:hover){ .is-style-panneau .index.index-articles .entete-index,.is-style-panneau .index.index-articles .ligne{grid-template-columns:210px 1fr 130px 52px} } @media (min-width:1100px) and (max-width:1180px) and (hover:hover){ .is-style-panneau .index.index-articles .entete-index,.is-style-panneau .index.index-articles .ligne{grid-template-columns:180px 1fr 130px 52px} } /* ---------- Défilement latéral ---------- */ .wp-block-group.serie{padding-top:96px} .serie p.guide{margin:0;max-width:none;font-family:var(--wp--preset--font-family--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--wp--preset--color--gris); display:flex;align-items:center;gap:9px;line-height:normal} /* Trait du guide : barre de progression du rail. --avance (0 à 1) est posée * par assets/js/rail.js ; sans script, le trait reste un simple filet. */ .serie p.guide::after{content:"";width:38px;height:1px;background:linear-gradient(var(--wp--preset--color--encre),var(--wp--preset--color--encre)) 0 0/calc(var(--avance,0) * 100%) 100% no-repeat,var(--wp--preset--color--filet)} /* Flèches du rail (Eric, 19/10/2026) : deux boutons de part et d'autre du guide, jamais posés sur les photos ; 44 px au moins, comme « Fermer ». Masquées en début et en fin de course (rail.js). Libellés : paragraphes masqués. */ .titre-sec p.libelle-precedent,.titre-sec p.libelle-suivant{display:none} .titre-sec .pilotage{display:flex;align-items:center;gap:.75rem;align-self:center;margin-block:-.875rem} /* (marges négatives : la ligne du titre garde sa hauteur, rien ne bouge au-dessous) */ .pilotage .fleche,.commandes .fleche,.commandes .pause{position:relative;flex:none;width:2.75rem;height:2.75rem;margin:0;padding:0;border:1px solid var(--wp--preset--color--filet);border-radius:0;background:transparent;color:var(--wp--preset--color--encre);cursor:pointer} .pilotage .fleche::before,.commandes .fleche::before{content:"";position:absolute;left:50%;top:50%;width:.5rem;height:.5rem;border:solid currentColor;border-width:0 0 1px 1px;transform:translate(-30%,-50%) rotate(45deg)} .pilotage .fleche.suivant::before,.commandes .fleche.suivant::before{transform:translate(-70%,-50%) rotate(-135deg)} .pilotage .fleche:hover{border-color:var(--wp--preset--color--encre)} .pilotage .fleche.masquee{visibility:hidden} /* Sur le bandeau : même flèche, en clair, voile léger pour rester lisible sur une photo claire. */ .commandes .fleche,.commandes .pause{color:var(--wp--preset--color--clair);border-color:rgba(241,243,242,.5);background:rgba(16,19,21,.28)} .commandes .fleche:hover,.commandes .pause:hover{border-color:var(--wp--preset--color--clair)} /* Pause / lecture : l'icône montre l'état (deux barres pendant le défilement, triangle en pause). */ .commandes .pause::before{content:"";position:absolute;left:50%;top:50%;width:.375rem;height:.625rem;border:solid currentColor;border-width:0 1px;transform:translate(-50%,-50%)} .commandes .pause.en-pause::before{width:0;height:0;border-width:.3125rem 0 .3125rem .5rem;border-color:transparent transparent transparent currentColor;transform:translate(-35%,-50%)} .commandes .fleche:focus-visible,.commandes .pause:focus-visible{outline:2px solid var(--wp--preset--color--clair);outline-offset:2px} .wp-block-group.rail{display:flex;gap:2px;margin-top:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--wp--preset--color--filet) transparent;padding-bottom:16px} .rail::-webkit-scrollbar{height:2px} .rail::-webkit-scrollbar-thumb{background:var(--wp--preset--color--filet)} .rail .wp-block-image{flex:0 0 clamp(300px,38vw,520px);scroll-snap-align:start;scroll-snap-stop:always;margin:0} .rail .wp-block-image a{display:block} .rail .wp-block-image img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:var(--wp--preset--color--attente)} .rail .wp-element-caption{margin:0;padding:12px 2px 0;font-family:var(--wp--preset--font-family--sans);font-size:.84375rem;letter-spacing:-.012em;line-height:normal;color:var(--wp--preset--color--encre);text-align:left} .rail .wp-element-caption em{display:block;font-style:normal;font-family:var(--wp--preset--font-family--mono);font-size:.65625rem;letter-spacing:inherit;color:var(--wp--preset--color--gris);margin-top:4px} /* ---------- À propos ---------- */ .wp-block-group.propos{grid-template-columns:.72fr 1fr;gap:64px;align-items:center;padding-top:100px} .propos .portrait{position:relative;aspect-ratio:4/5;margin:0;background:var(--wp--preset--color--attente);overflow:hidden} .propos .portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .propos .portrait .wp-element-caption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:10px 14px;background:rgba(16,19,21,.82);color:var(--wp--preset--color--papier); font-family:var(--wp--preset--font-family--mono);font-size:.59375rem;letter-spacing:.06em;line-height:normal;text-align:left} .propos h2{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:300;letter-spacing:-.03em;line-height:1.12;margin-bottom:22px;max-width:18ch} .propos p{font-size:.90625rem;line-height:1.9;color:var(--wp--preset--color--encre-douce);max-width:58ch} .propos p + p{margin-top:15px} /* Le paragraphe joue le rôle du bloc anonyme de la maquette (corps 16 px), la marge passe au lien. */ .propos p.plus{margin-top:0;font-size:1rem;line-height:normal} .propos p.plus a{display:inline-block;margin-top:26px;font-family:var(--wp--preset--font-family--mono);font-size:.65625rem;letter-spacing:.06em;color:var(--wp--preset--color--encre);border-bottom:1px solid var(--wp--preset--color--filet);padding-bottom:4px} .propos p.plus a:hover{border-color:var(--wp--preset--color--encre)} /* ---------- Le plein cadre ---------- */ .wp-block-group.moment{position:relative;margin-top:96px;background:var(--wp--preset--color--nuit)} .moment .wp-block-image{margin:0} .moment .wp-block-image img{width:100%;height:100svh;object-fit:cover;display:block} .wp-block-group.moment::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;pointer-events:none;z-index:1; background:linear-gradient(180deg,rgba(11,12,13,0) 0%,rgba(11,12,13,.28) 42%,rgba(11,12,13,.62) 72%,rgba(11,12,13,.86) 100%)} .moment .legende-moment{position:absolute;left:40px;bottom:36px;right:40px;z-index:2;gap:24px;align-items:flex-end;color:var(--wp--preset--color--clair)} .moment p{margin:0;color:inherit} .moment p.mot{font-size:clamp(1.3rem,2.6vw,2rem);font-weight:300;letter-spacing:-.03em;line-height:1.2;max-width:24ch;text-shadow:0 1px 30px rgba(0,0,0,.45)} .moment p.cred{max-width:none;font-family:var(--wp--preset--font-family--mono);font-size:.625rem;letter-spacing:.1em;line-height:normal;color:rgba(241,243,242,.85);text-align:right;text-shadow:0 1px 20px rgba(0,0,0,.5)} /* ---------- Références ---------- */ .wp-block-group.refs{padding-top:100px} .wp-block-list.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;margin:20px 0 0;padding:0;list-style:none;background:var(--wp--preset--color--filet);border:1px solid var(--wp--preset--color--filet)} .logos li{background:var(--wp--preset--color--papier);display:flex;align-items:center;justify-content:center;padding:26px 12px; font-family:var(--wp--preset--font-family--mono);font-size:.6875rem;line-height:normal;color:var(--wp--preset--color--gris);text-align:center;letter-spacing:.02em;transition:background .3s,color .3s} .logos li:hover{background:var(--wp--preset--color--papier-2);color:var(--wp--preset--color--encre)} /* ---------- Questions ---------- */ .wp-block-group.questions{padding-top:100px} .questions .qbloc{border-top:1px solid var(--wp--preset--color--filet);padding:34px 0;grid-template-columns:.72fr 1fr;gap:64px} .qbloc h3{font-size:clamp(1.05rem,1.9vw,1.35rem);font-weight:400;letter-spacing:-.022em;line-height:1.25;max-width:20ch} .qbloc p{font-size:.875rem;line-height:1.9;color:var(--wp--preset--color--encre-douce);max-width:62ch} /* ---------- 1180 px et moins ---------- */ @media (max-width:1180px){ .wp-block-group.metiers{grid-template-columns:repeat(6,1fr)} .metiers .tuile{grid-column:span 2} .metiers .tuile:nth-child(n+4){grid-column:span 3} .wp-block-list.logos{grid-template-columns:repeat(3,1fr)} .index .entete-index,.index .ligne{grid-template-columns:180px 1fr 130px 58px} .entete-index p:nth-child(3),.ligne p.type{display:none} .ligne .wp-block-image{width:180px} /* Index des articles : 4 colonnes déjà, rien à masquer (la 3e est l'année). */ .index.index-articles .entete-index,.index.index-articles .ligne{grid-template-columns:180px 1fr 130px 58px} .index-articles .entete-index p:nth-child(3){display:block} .index-articles .ligne .wp-block-post-featured-image{width:180px} } /* Menu en ligne en blanc dans l'état transparent : au-delà de 820 px seulement * (en dessous, le menu est un volet sur fond clair). */ @media (min-width:821px){ .page-template-page-accueil .wp-block-template-part:not(.entete-detachee) #navigation a{color:#fff} .page-template-page-accueil .wp-block-template-part:not(.entete-detachee) #navigation a:hover, .page-template-page-accueil .wp-block-template-part:not(.entete-detachee) #navigation a[aria-current]{border-color:#fff} } /* ---------- 820 px et moins ---------- */ @media (max-width:820px){ .wp-block-group.metiers{grid-template-columns:1fr} .metiers .tuile,.metiers .tuile:nth-child(n+4){grid-column:auto} .metiers .tuile{aspect-ratio:16/9} /* +10 px (Eric, 20/10/2026) : la rangée filet + pause (44 px) loge sous le * sous-titre ; le bloc de titre remonte d'autant (44 px du bas au lieu de * 34) et reste donc à la même hauteur depuis le haut de l'image. */ .wp-block-group.bandeau{height:calc(52vh + .625rem)} /* Commandes du bandeau sur mobile (Eric, 20/10/2026) : plus de barre * d'outils encadrée en travers de la photo. Deux petites marques en haut * (filet de progression, icône pause), et deux flèches au trait fin aux * bords. Chaque flèche est un VRAI