, donc
tout le bandeau est cliquable. Le titre et le surtitre sont ceux de la
charte : ils sont entierement neutralises ici, c'est un bandeau, pas un
titre de section. */
.rowbandeaunouveau{
margin-top:var(--hauteur-entete);
background:linear-gradient(90deg,var(--gold) 0%,var(--gold-light) 100%);
}
.rowbandeaunouveau > .containerA{padding:0}
.pres1bandeaunouveau > .coltexte{
display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;
padding:.7rem 1.6rem;text-align:center;text-decoration:none;color:var(--navy);
transition:filter .2s ease;
}
.pres1bandeaunouveau > .coltexte:hover{filter:brightness(1.05)}
.pres1bandeaunouveau .titres{display:flex;align-items:center;gap:1rem}
.pres1bandeaunouveau .surtitre{
margin:0;padding:.28rem .7rem;border-radius:2px;
background:var(--navy);color:var(--gold);
font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.pres1bandeaunouveau .tc1{
margin:0;font-family:var(--serif);font-size:1.1rem;font-weight:600;color:var(--navy);
}
.pres1bandeaunouveau .txt p{margin:0;font-size:.9rem;font-weight:400;letter-spacing:.02em}
.pres1bandeaunouveau .cta{
display:inline-block;margin-left:.6rem;padding-bottom:2px;
border-bottom:1px solid var(--navy);
font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.pres1bandeaunouveau .cta::after{content:' \2192'}
/* --- heroaccueil : le hero de l'accueil ----------------------------------- */
/* Pas de groupe ici : le hero de l'accueil est un contenu unique, donc c'est
sa propre row qui porte la photographie et le voile. Les groupes des pages
interieures, eux, se justifient : le fil d'Ariane et le hero y sont deux
contenus qui partagent la meme image. */
.rowheroaccueil{
position:relative;overflow:hidden;
min-height:78vh;display:flex;flex-direction:column;justify-content:center;
padding:4.5rem 0 5rem;
background-color:var(--navy);
background-image:url('/lib/picts/pages2/chablis-hero.jpg');
background-size:cover;background-position:center 60%;background-repeat:no-repeat;
}
.rowheroaccueil::before{
content:'';position:absolute;inset:0;z-index:1;
background:
linear-gradient(rgba(201,168,76,.03) 1px,transparent 1px) 0 0/80px 80px,
linear-gradient(90deg,rgba(201,168,76,.03) 1px,transparent 1px) 0 0/80px 80px,
linear-gradient(90deg,rgba(15,30,53,.92) 0%,rgba(15,30,53,.75) 50%,rgba(15,30,53,.55) 100%),
linear-gradient(180deg,rgba(15,30,53,.4) 0%,rgba(15,30,53,.7) 100%);
}
.rowheroaccueil::after{
content:'';position:absolute;top:0;bottom:0;left:50%;width:1px;z-index:1;
background:rgba(201,168,76,.15);
}
.rowheroaccueil > .containerA{position:relative;z-index:2}
/* --- heroaccueil : texte a gauche, interventions a droite (presentation 15) */
/* Le chapeau et la colonne 1 occupent la colonne de gauche, la colonne 2
occupe toute la hauteur a droite : c'est une grille, d'ou la neutralisation
du flex du socle. */
.pres15heroaccueil{
display:grid;grid-template-columns:1fr 1fr;
gap:2.5rem 4rem;align-items:center;
}
.pres15heroaccueil > .chapeau{grid-column:1;grid-row:1;align-self:end}
.pres15heroaccueil > .col1{grid-column:1;grid-row:2;align-self:start}
.pres15heroaccueil > .col2{grid-column:2;grid-row:1/3}
.pres15heroaccueil .surtitre{
display:inline-flex;align-items:center;gap:.6rem;
margin-bottom:1.8rem;padding:.32rem .85rem;
border:1px solid rgba(201,168,76,.35);
font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
}
.pres15heroaccueil .surtitre::before{content:'';display:inline-block;width:18px;height:1px;background:var(--gold)}
.pres15heroaccueil .tc1{
font-size:clamp(2.8rem,4.5vw,4rem);font-weight:300;line-height:1.13;
color:var(--white);margin:0 0 1.5rem;
}
.pres15heroaccueil .tc1 strong{font-weight:600;color:var(--gold);display:block}
.pres15heroaccueil .accroche{
margin:0 0 2.5rem;max-width:480px;
color:rgba(255,255,255,.58);font-size:1.08rem;line-height:1.78;font-weight:300;
}
/* Les deux boutons sont des liens poses dans un champ HTML, donc dans un :
ils tombent sous la regle de maillage interne .pres .txt p a, qui les
passerait en dore souligne. Les selecteurs ci-dessous reprennent le meme
chemin (.txt p a) pour la depasser - c'est la precaution a prendre pour
tout element d'interface ecrit dans un champ HTML. */
.pres15heroaccueil .boutons{display:flex;gap:1rem;flex-wrap:wrap;margin:0}
.pres15heroaccueil .txt p a.boutonor,
.pres15heroaccueil .txt p a.boutonfin{
padding:.9rem 2rem;border-radius:2px;text-decoration:none;
font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
transition:all .2s;
}
.pres15heroaccueil .txt p a.boutonor{background:var(--gold);color:var(--navy)}
.pres15heroaccueil .txt p a.boutonor:hover{background:var(--gold-light);color:var(--navy)}
.pres15heroaccueil .txt p a.boutonfin{border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.78)}
.pres15heroaccueil .txt p a.boutonfin:hover{border-color:var(--gold);color:var(--gold)}
/* les trois chiffres, sous les boutons */
.pres15heroaccueil > .col1 .txt{
display:flex;gap:2.5rem;flex-wrap:wrap;
padding-top:2rem;border-top:1px solid rgba(201,168,76,.15);
}
.pres15heroaccueil .chiffre{display:flex;flex-direction:column}
.pres15heroaccueil .chiffre .val{
font-family:var(--serif);font-size:2.2rem;font-weight:300;color:var(--white);line-height:1;
}
.pres15heroaccueil .chiffre .val span{color:var(--gold)}
.pres15heroaccueil .chiffre .lib{
margin-top:.3rem;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);
}
/* le panneau des dernieres interventions */
.pres15heroaccueil > .col2 > .intcol{
background:rgba(15,30,53,.78);backdrop-filter:blur(6px);
border:1px solid rgba(201,168,76,.18);
}
.pres15heroaccueil .enteteAC{
padding:.9rem 1.4rem;background:rgba(201,168,76,.05);
border-bottom:1px solid rgba(201,168,76,.12);
font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);
}
.pres15heroaccueil .groupAC{display:block}
.pres15heroaccueil .presAC{
position:relative;
flex-direction:row;align-items:center;gap:1.2rem;
padding:1.1rem 1.4rem;background:rgba(255,255,255,.03);
border-bottom:1px solid rgba(201,168,76,.07);
transition:background .2s;
}
.pres15heroaccueil .presAC:last-child{border-bottom:none}
.pres15heroaccueil .presAC:hover{background:rgba(201,168,76,.08)}
.pres15heroaccueil .presAC .imageAC{
flex:0 0 120px;width:120px;height:78px;
border:1px solid rgba(201,168,76,.15);background:var(--navy-mid);
}
.pres15heroaccueil .presAC .imageAC img{object-position:center 22%}
.pres15heroaccueil .presAC .texteAC{padding:0}
.pres15heroaccueil .presAC .source{margin-bottom:.3rem;font-size:.76rem;letter-spacing:.1em}
.pres15heroaccueil .presAC .titre{
margin:0;flex:0 0 auto;
font-size:1.08rem;font-weight:400;color:rgba(255,255,255,.8);line-height:1.35;
}
.pres15heroaccueil .presAC a.titre:hover{color:var(--gold-light)}
.pres15heroaccueil .presAC .date{margin:.25rem 0 0}
/* toute la carte est cliquable : le lien du titre est etire sur la carte.
Le lien de la vignette, qui pointe au meme endroit, passe dessous. */
.pres15heroaccueil .presAC a.titre::after{content:'';position:absolute;inset:0;z-index:1}
/* --- la section grise des prestations ------------------------------------- */
/* Deux contenus consecutifs sur le meme fond : le fond vient de l'autrestyle
fondoffwhite pose sur chacun, pas d'un groupe. Un groupe ne se justifie que
lorsqu'il faut un element commun aux deux rows - une image de fond partagee,
une mise en page cote a cote. Ici le padding de section est simplement
reparti : le haut sur la premiere row, le bas sur la seconde. */
/* L'espace sous le titre est un padding de la row, pas une marge du bloc :
une marge basse posee a l'interieur de la row s'en echapperait par fusion
des marges, et le fond de section se couperait entre les deux contenus.
C'est le groupe qui l'absorbait jusqu'ici. */
.rowentetesection{padding:var(--secpad) 0 3rem}
.rowprestationsaccueil{padding:0 0 var(--secpad)}
/* --- entetesection : titre a gauche, introduction a droite (presentation 5) */
.pres5entetesection{
display:grid;grid-template-columns:1fr auto;align-items:end;
gap:2rem;
}
.pres5entetesection > .titres{grid-column:1}
.pres5entetesection > .txt{grid-column:2;max-width:540px}
.pres5entetesection .tc1{margin:0;font-size:clamp(2.2rem,3.2vw,3rem)}
.pres5entetesection .txt p{margin:0;color:var(--grey);font-size:1.02rem;line-height:1.72;font-weight:300}
/* --- prestationsaccueil : tuiles avec visuel revele au survol (pres. 100) -- */
/* Le visuel est en fond de tuile : il est donc absolu dans .intcol, qui porte
le padding ET la position. Ne pas remonter le padding sur .col, sinon le
visuel serait rogne de la valeur du padding. */
.pres100prestationsaccueil > .grille{
display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:var(--grey-light);
}
.pres100prestationsaccueil .col{background:var(--white);text-decoration:none;color:inherit}
.pres100prestationsaccueil .intcol{
position:relative;overflow:hidden;
min-height:280px;padding:2.2rem 1.8rem;
display:flex;flex-direction:column;
}
.pres100prestationsaccueil .box-img{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .5s ease}
.pres100prestationsaccueil .box-img picture,
.pres100prestationsaccueil .box-img img{display:block;width:100%;height:100%;object-fit:cover}
.pres100prestationsaccueil .col:hover .box-img{opacity:1}
/* voile sombre pour que le texte reste lisible sur la photographie */
.pres100prestationsaccueil .intcol::after{
content:'';position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .5s ease;
background:linear-gradient(180deg,rgba(15,30,53,0) 0%,rgba(15,30,53,.55) 40%,rgba(15,30,53,.9) 100%);
}
.pres100prestationsaccueil .col:hover .intcol::after{opacity:1}
/* filet dore qui se deploie en bas de la tuile */
.pres100prestationsaccueil .intcol::before{
content:'';position:absolute;left:0;bottom:0;z-index:3;
height:2px;width:0;background:var(--gold);transition:width .4s ease;
}
.pres100prestationsaccueil .col:hover .intcol::before{width:100%}
.pres100prestationsaccueil .txt{position:relative;z-index:2;display:flex;flex-direction:column;flex:1}
.pres100prestationsaccueil .num{
display:block;margin-bottom:1.1rem;
font-family:var(--serif);font-size:1.5rem;letter-spacing:.1em;color:var(--gold);
}
.pres100prestationsaccueil .tc2{
margin:0 0 .7rem;font-size:1.5rem;font-weight:600;color:var(--navy);line-height:1.3;
transition:color .3s;
}
.pres100prestationsaccueil .txt p{
margin:0;font-size:.93rem;color:var(--grey);line-height:1.65;font-weight:300;transition:color .3s;
}
.pres100prestationsaccueil .txt::after{
content:'\2192';margin-top:auto;padding-top:1.3rem;
color:var(--gold);font-size:1rem;opacity:0;transition:opacity .3s;
}
.pres100prestationsaccueil .col:hover .tc2{color:var(--white)}
.pres100prestationsaccueil .col:hover .txt p{color:rgba(255,255,255,.9)}
.pres100prestationsaccueil .col:hover .txt::after{opacity:1}
/* le panneau editorial : derniere tuile, deux colonnes de large, visuel
toujours visible. La regle porte sur :last-child, donc elle suit si des
prestations sont ajoutees avant lui. */
.pres100prestationsaccueil > .grille > .col:last-child{grid-column:span 2;background:var(--navy)}
.pres100prestationsaccueil > .grille > .col:last-child .intcol{justify-content:center;padding:2.5rem 3rem}
.pres100prestationsaccueil > .grille > .col:last-child .box-img{opacity:1}
.pres100prestationsaccueil > .grille > .col:last-child .box-img img{object-position:center right}
.pres100prestationsaccueil > .grille > .col:last-child .intcol::after{
opacity:1;
background:linear-gradient(90deg,var(--navy) 22%,rgba(15,30,53,.55) 48%,rgba(15,30,53,0) 70%);
}
.pres100prestationsaccueil > .grille > .col:last-child .txt{max-width:540px}
.pres100prestationsaccueil > .grille > .col:last-child .txt::after{display:none}
/* le surtitre du panneau est dans le champ HTML, donc apres le titre dans le
flux : la colonne flex le remonte avec order, sans toucher au template */
.pres100prestationsaccueil .surtitrepanneau{
order:-1;margin:0 0 .9rem;
font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);
}
.pres100prestationsaccueil > .grille > .col:last-child .tc2{
margin-bottom:1rem;font-weight:300;font-size:clamp(1.6rem,2.2vw,2.1rem);color:var(--white);line-height:1.25;
}
.pres100prestationsaccueil > .grille > .col:last-child .tc2 strong{font-weight:600;color:var(--gold-light)}
.pres100prestationsaccueil > .grille > .col:last-child .txt p{color:rgba(255,255,255,.72);line-height:1.7}
.pres100prestationsaccueil .lienpanneau{
margin-top:1.4rem;color:var(--gold);font-size:.9rem;letter-spacing:.05em;transition:color .2s;
}
.pres100prestationsaccueil .lienpanneau::after{content:' \2192'}
.pres100prestationsaccueil > .grille > .col:last-child:hover .lienpanneau{color:var(--gold-light)}
/* --- grpapproche : deux demi-sections cote a cote ------------------------- */
/* Ici le groupe est indispensable, et c'est le seul de la page : deux contenus
distincts doivent se placer cote a cote, ce qui demande un parent commun.
Le groupe devient une grille de deux colonnes, chaque row est une moitie,
avec sa propre gouttiere et son propre fond. */
.rowgrpapproche{display:grid;grid-template-columns:1fr 1fr}
.rowgrpapproche > .row{padding:var(--secpad) 0}
.rowgrpapproche > .rowpiliers{border-right:1px solid var(--grey-light)}
/* --- piliers : chapeau + quatre piliers numerotes (presentation 18) ------- */
/* Les quatre colonnes de la presentation 18 sont empilees : c'est une liste,
pas une rangee. Le chiffre romain est une donnee du champ HTML, place par la
grille devant le titre - pas un compteur CSS. */
.pres18piliers{display:grid;grid-template-columns:1fr}
.pres18piliers > .chapeau{margin-bottom:2.5rem}
.pres18piliers .surtitre{margin-bottom:.7rem}
.pres18piliers .tc1{margin:0 0 .9rem;font-size:clamp(2.2rem,3.2vw,3rem)}
.pres18piliers > .chapeau .txt p{margin:0;max-width:540px;color:var(--grey);font-size:1.02rem;line-height:1.72;font-weight:300}
.pres18piliers > .col{padding:1.3rem 0;border-bottom:1px solid var(--grey-light)}
.pres18piliers > .col .txt{display:grid;grid-template-columns:26px 1fr;column-gap:1.1rem;align-items:start}
.pres18piliers > .col .num{
grid-column:1;grid-row:1/span 2;padding-top:.1rem;
font-family:var(--serif);font-size:.92rem;letter-spacing:.08em;color:var(--gold);
}
.pres18piliers > .col .tc2{
grid-column:2;grid-row:1;margin:0 0 .28rem;
font-family:var(--sans);font-size:1rem;font-weight:500;color:var(--navy);
}
.pres18piliers > .col .txt p{grid-column:2;grid-row:2;margin:0;font-size:.92rem;color:var(--grey);line-height:1.6;font-weight:300}
/* --- metriques : quatre chiffres en 2x2 + citation en pied (pres. 18) ----- */
.pres18metriques{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--grey-light)}
.pres18metriques > .col{background:var(--white)}
.pres18metriques > .col > .intcol{padding:2rem 1.6rem}
.pres18metriques .tc2{
margin:0;font-family:var(--serif);font-size:2.8rem;font-weight:300;
color:var(--navy);line-height:1;
}
.pres18metriques .tc2 sup{font-size:1.1rem;color:var(--gold)}
.pres18metriques .txt p{
margin:.45rem 0 0;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;
color:var(--grey);line-height:1.4;
}
.pres18metriques > .pied{grid-column:1/-1;background:var(--off-white);padding:1.8rem}
.pres18metriques > .pied .citation{
margin:0;font-family:var(--serif);font-size:1.3rem;font-style:italic;
color:var(--gold);line-height:1.45;
}
.pres18metriques > .pied .legende{
margin:.5rem 0 0;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;
color:var(--grey);line-height:1.4;
}
/* --- mediasaccueil : titre + onglets + grille + bouton (presentation 5) --- */
/* display:contents sur .txt : le moteur de listes rend l'entete et la grille
DANS le champ HTML, donc un niveau plus bas que le titre. On les remonte au
niveau de la grille pour que les onglets se placent a droite du titre. */
.rowmediasaccueil{padding:var(--secpad) 0}
.pres5mediasaccueil{
display:grid;grid-template-columns:1fr auto;align-items:end;
row-gap:2.8rem;column-gap:2rem;
}
.pres5mediasaccueil > .txt{display:contents}
.pres5mediasaccueil > .titres{grid-column:1;grid-row:1}
.pres5mediasaccueil .enteteAC{grid-column:2;grid-row:1;justify-self:end}
.pres5mediasaccueil .groupAC{grid-column:1/-1;grid-row:2}
.pres5mediasaccueil > .readmore{grid-column:1/-1;grid-row:3;justify-self:center}
.pres5mediasaccueil .surtitre{margin-bottom:.7rem}
.pres5mediasaccueil .tc1{margin:0;font-size:clamp(2.2rem,3.2vw,3rem)}
.pres5mediasaccueil .filtreAC{display:flex;gap:0;border:1px solid var(--grey-light);background:var(--white)}
.pres5mediasaccueil .ongletAC{
padding:.55rem 1.2rem;border:none;background:transparent;cursor:pointer;
font-family:var(--sans);font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;
color:var(--grey);white-space:nowrap;transition:background .2s,color .2s;
}
.pres5mediasaccueil .ongletAC:hover{background:var(--off-white);color:var(--navy)}
.pres5mediasaccueil .ongletAC.actif{background:var(--navy);color:var(--white)}
.pres5mediasaccueil > .readmore{
padding:.9rem 2.2rem;background:var(--navy);color:var(--white);
font-size:.88rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
border-radius:2px;transition:background .2s;
}
.pres5mediasaccueil > .readmore:hover{background:var(--navy-light)}
.pres5mediasaccueil > .readmore::after{content:' \2192'}
/* --- clients : quatre publics, pastille ronde (presentation 18) ----------- */
/* La maquette encadre les quatre publics d'un seul filet. La presentation 18
n'a pas de conteneur autour de ses colonnes (contrairement au .grille de la
presentation 100) : le cadre est donc porte par les colonnes elles-memes,
chacune sans bord droit sauf la derniere. */
.rowclients{padding:5rem 0}
.pres18clients{justify-content:center}
.pres18clients > .chapeau{margin-bottom:2.8rem;text-align:center}
.pres18clients .tc1{
margin:0;font-family:var(--serif);font-size:1.15rem;font-weight:300;
letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
}
.pres18clients > .col{
flex:1 1 180px;max-width:215px;
border:1px solid var(--grey-light);border-right:none;
}
.pres18clients > .col:last-child{border-right:1px solid var(--grey-light)}
.pres18clients > .col > .intcol{padding:2.2rem 1.4rem}
/* l'icone est dans le champ HTML, donc apres le titre dans le flux : la
colonne flex la remonte avec order, sans toucher au template */
.pres18clients .txt{display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center}
.pres18clients .ico{order:-1}
.pres18clients .ico{
display:block;width:42px;height:42px;border-radius:50%;
background-color:var(--navy);background-repeat:no-repeat;background-position:center;background-size:20px 20px;
}
.pres18clients .tc2{
margin:0;font-family:var(--sans);font-size:.88rem;font-weight:500;
letter-spacing:.08em;text-transform:uppercase;color:var(--navy);line-height:1.4;
}
.pres18clients .ico-bouclier{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9a84c'%3E%3Cpath d='M12 2L2 7v10c0 5.5 10 9 10 9s10-3.5 10-9V7L12 2z'/%3E%3C/svg%3E")}
.pres18clients .ico-liste{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9a84c'%3E%3Cpath d='M3 13h18v-2H3v2zm0 4h18v-2H3v2zm0-8h18V7H3v2zM3 3v2h18V3H3z'/%3E%3C/svg%3E")}
.pres18clients .ico-equipe{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9a84c'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E")}
.pres18clients .ico-immeuble{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9a84c'%3E%3Cpath d='M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z'/%3E%3C/svg%3E")}
/* ===== 5. AUTRESTYLES ==================================================== */
.rowfondor{background:var(--gold)}
.rowfondnavy{background:var(--navy)}
.rowfondoffwhite{background:var(--off-white)}
.rowfondnavy .tc1{color:var(--white)}
.rowfondnavy .tc1 strong{color:var(--gold)}
/* ===== 6. RESPONSIVE ===================================================== */
/* --- Menu mobile : point de rupture impose par megamenuv4.js -------------- */
/* ===== 7. STRUCTURE GLOBALE DE PAGE ====================================== */
/*
*/
#zt{width:100%;overflow-x:hidden}
#ZC{width:100%}
#content{display:block;width:100%}
/* L'entête est fixe : le premier bloc de contenu doit réserver sa hauteur
(ici le padding-top du groupe hero le fait déjà). */
:root{--hauteur-entete:80px}
/* Ancres de navigation interne : le champ Ancre d'un contenu devient l'id de
sa row. L'entête étant fixe, l'arrivée sur l'ancre doit dégager sa hauteur,
sinon le haut de la section passe dessous. La règle vaut pour toutes les
rows ancrées, quelle que soit la présentation. */
.row[id]{scroll-margin-top:var(--hauteur-entete-reelle,var(--hauteur-entete))}
/* ===== 8. ENTÊTE ========================================================= */
header{position:fixed;top:0;left:0;right:0;z-index:100}
.rowH{background:rgba(15,30,53,.97);backdrop-filter:blur(8px);border-bottom:1px solid rgba(201,168,76,.2)}
.rowH > .containerA{
width:100%;max-width:none;margin:0;padding:0 var(--gutter);
height:var(--hauteur-entete);
display:flex;align-items:center;justify-content:space-between;gap:2rem;
}
.rowH .c1{flex:0 0 auto;display:flex;align-items:center}
.rowH .c1 .logo{display:block;line-height:0}
.rowH .c1 img{height:48px;display:block}
.rowH .c2{flex:1 1 auto;display:flex;justify-content:center}
.rowH .c3{flex:0 0 auto;display:flex;align-items:center;gap:.7rem}
/* --- MENU (markup attendu par megamenuv4.js, point de rupture 943px) ----- */
/* Le JS ajoute lui-meme : a.menu-mobile, li.menu-dropdown-icon, ul.normal-sub,
ul.show-on-mobile et li.mFlip. Le serveur ne produit aucune de ces classes. */
.menu-container{display:flex;align-items:center}
.menu-container .clear{clear:both}
nav.menu{position:static}
nav.menu > ul{display:flex;align-items:center;gap:2rem;list-style:none;margin:0;padding:0}
nav.menu > ul > li{position:relative;margin:0}
nav.menu > ul > li > span{display:block}
nav.menu > ul > li > span > a{
display:flex;align-items:center;height:var(--hauteur-entete);
color:rgba(255,255,255,.72);text-decoration:none;white-space:nowrap;
font-size:.88rem;letter-spacing:.06em;text-transform:uppercase;font-weight:400;
line-height:1.2;transition:color .2s;
}
nav.menu > ul > li:hover > span > a{color:var(--gold-light)}
nav.menu > ul > li.actif > span > a{color:var(--gold)}
/* chevron pose par le JS sur les rubriques qui ont un sous-menu */
nav.menu > ul > li.menu-dropdown-icon > span > a::after{
content:'';display:inline-block;width:.4em;height:.4em;margin-left:.5em;
border-right:1px solid currentColor;border-bottom:1px solid currentColor;
transform:translateY(-.15em) rotate(45deg);
}
/* panneau deroulant */
nav.menu > ul > li > ul{
display:none;position:absolute;top:100%;left:0;z-index:100;
min-width:260px;margin:0;padding:1.4rem 0;list-style:none;
background:rgba(15,30,53,.98);border:1px solid rgba(201,168,76,.2);border-top:0;
}
/* ouverture au survol : en CSS et non en JS (cf. commentaire de megamenuv4.js) */
nav.menu > ul > li:hover > ul{display:flex}
nav.menu > ul > li > ul.normal-sub{min-width:220px}
nav.menu > ul > li > ul > li.col{flex:1 1 auto;min-width:220px;padding:0 1.6rem;list-style:none}
nav.menu > ul > li > ul > li.col + li.col{border-left:1px solid rgba(201,168,76,.15)}
nav.menu > ul > li > ul ul{list-style:none;margin:0;padding:0}
nav.menu > ul > li > ul li a{
display:block;padding:.45rem 0;color:rgba(255,255,255,.6);text-decoration:none;
font-size:.85rem;letter-spacing:.03em;transition:color .2s;
}
nav.menu > ul > li > ul li a:hover{color:var(--gold-light)}
nav.menu > ul > li > ul li.actif > a{color:var(--gold)}
/* 3e niveau eventuel */
nav.menu > ul > li > ul li ul{padding-left:.9rem;border-left:1px solid rgba(201,168,76,.15)}
nav.menu > ul > li > ul li ul a{font-size:.8rem;color:rgba(255,255,255,.45)}
/* bouton burger et bouton + inseres par le JS : masques au-dessus de 943px */
a.menu-mobile{display:none}
nav.menu .ouvre{display:none}
.btn-entete{
border:1px solid rgba(201,168,76,.5);color:var(--gold-light);
padding:.42rem 1rem;border-radius:2px;
font-size:.84rem;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;
font-family:var(--sans);transition:all .2s;white-space:nowrap;
}
.btn-entete:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.btn-entete.plein{background:var(--gold);color:var(--navy);border-color:var(--gold);font-weight:500}
.btn-entete.plein:hover{background:var(--gold-light);border-color:var(--gold-light)}
/* ===== 9. PIED DE PAGE =================================================== */
footer{background:#080f1a}
.rowF1 > .containerA{
width:100%;max-width:none;margin:0;
padding:4rem var(--gutter) 3rem;
display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3rem;
border-bottom:1px solid rgba(201,168,76,.1);
}
/* mot-logo typographique du pied */
.rowF1 .marque{
display:block;margin-bottom:1rem;
font-family:var(--serif);font-size:1.4rem;font-weight:600;letter-spacing:.08em;
color:#fff;
}
.rowF1 .marque span{color:var(--gold)}
/* conserve si un logo image est prefere au mot-logo */
.rowF1 .footc1 img{height:40px;margin-bottom:1.2rem;filter:brightness(0) invert(1);opacity:.85}
.rowF1 .footc1 p{font-size:.9rem;color:rgba(255,255,255,.32);line-height:1.7;font-weight:300;max-width:250px}
.rowF1 h4{font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem;font-weight:500}
.rowF1 ul{list-style:none;margin:0;padding:0}
.rowF1 li{margin-bottom:.6rem}
.rowF1 a{font-size:.92rem;color:rgba(255,255,255,.38);text-decoration:none;transition:color .2s}
.rowF1 a:hover{color:rgba(255,255,255,.82)}
.rowF1 .coord{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:.85rem}
.rowF1 .coord span{font-size:.9rem;color:rgba(255,255,255,.38);line-height:1.5}
.rowF1 .coord .ico{
flex:0 0 16px;width:16px;height:16px;margin-top:.2rem;
background-color:var(--gold);
-webkit-mask-position:center;mask-position:center;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-size:contain;mask-size:contain;
}
.rowF1 .ico-adresse{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E")}
.rowF1 .ico-mail{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E")}
.rowF1 .ico-tel{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.2c1.1.4 2.3.6 3.6.6a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.4a1 1 0 0 1 1 1c0 1.2.2 2.4.6 3.6a1 1 0 0 1-.2 1l-2.2 2.2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.2c1.1.4 2.3.6 3.6.6a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.4a1 1 0 0 1 1 1c0 1.2.2 2.4.6 3.6a1 1 0 0 1-.2 1l-2.2 2.2z'/%3E%3C/svg%3E")}
.rowF2 > .containerA{
width:100%;max-width:none;margin:0;
padding:2rem var(--gutter) 2.5rem;
display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
}
.rowF2 .footc1{margin-right:auto} /* copyright colle a gauche */
.rowF2 .footc2{margin-left:auto} /* liens colles a droite */
.rowF2 .footc1 p{font-size:.82rem;color:rgba(255,255,255,.2)}
.rowF2 .footc2{display:flex;gap:2rem;flex-wrap:wrap}
.rowF2 a,.rowF2 .lien-cookies{
font-size:.82rem;color:rgba(255,255,255,.23);text-decoration:none;
font-family:var(--sans);background:none;border:0;padding:0;cursor:pointer;transition:color .2s;
}
.rowF2 a:hover,.rowF2 .lien-cookies:hover{color:rgba(255,255,255,.58)}
/* ===== 10. RESPONSIVE ===================================================
Place en fin de feuille : ces blocs doivent pouvoir surcharger toutes les
sections precedentes, structure de page et entete comprises. */
@media(max-width:1100px){
:root{--gutter:2rem}
/* --- page d'accueil ---------------------------------------------------- */
/* Le panneau des interventions disparait avec la colonne de droite du hero,
comme dans la maquette. Pour le conserver, remplacer ce display:none par
grid-column:1 et retirer la ligne grid-row du bloc principal. */
.pres15heroaccueil{grid-template-columns:1fr}
.pres15heroaccueil > .chapeau{grid-column:1;grid-row:1}
.pres15heroaccueil > .col1{grid-column:1;grid-row:2}
.pres15heroaccueil > .col2{display:none}
.rowheroaccueil::after{display:none}
.rowheroaccueil{min-height:auto}
.pres100prestationsaccueil > .grille{grid-template-columns:1fr 1fr}
.rowgrpapproche{grid-template-columns:1fr}
.rowgrpapproche > .rowpiliers{border-right:none}
.pres5mediasaccueil .groupAC{grid-template-columns:1fr 1fr}
/* liste des medias : 3 colonnes -> 2 */
.pres5medias .groupAC{grid-template-columns:1fr 1fr}
.pres5medias .topAC{grid-template-columns:1fr}
.pres5medias .topAC .imageAC{min-height:220px}
/* le menu desktop est encore affiche jusqu'a 943px : il doit tenir */
nav.menu > ul{gap:1.2rem}
nav.menu > ul > li > span > a{font-size:.8rem;letter-spacing:.03em}
.rowH > .containerA{gap:1.2rem}
.rowH .c1 img{height:40px}
.rowH .c3{gap:.5rem}
.rowH .c3 .btn-entete{padding:.38rem .7rem;font-size:.76rem;letter-spacing:.04em}
.rowF1 > .containerA{grid-template-columns:1fr 1fr;gap:2.5rem}
.pres18chiffresor > .col{flex:0 0 calc(50% - 1rem)}
.pres32prestation{grid-template-columns:1fr;column-gap:0;row-gap:0}
.pres32prestation > .col1{grid-column:1;grid-row:2;margin-bottom:3rem}
.pres32prestation > .col2{grid-row:3}
.pres32prestation > .col3{grid-row:4}
.pres32prestation > .col4{grid-row:5}
.pres32prestation > .col5{grid-row:6}
.pres32prestation > .col2,.pres32prestation > .col3,
.pres32prestation > .col4,.pres32prestation > .col5{grid-column:1}
.pres15livrables{grid-template-columns:1fr}
.pres19acv > .col{flex:0 0 100%}
.pres19acv > .col + .col{border-left:0;border-top:1.5px solid rgba(201,168,76,.15)}
.pres15methodebas{grid-template-columns:1fr}
.pres18audience > .col{flex:0 0 50%}
.pres100autresprestations .col{flex:0 0 calc((100% - 1.5px)/2)}
.pres100profils .col{flex:0 0 calc((100% - 1.5px)/2)}
.pres100espace .col{flex:0 0 calc((100% - 1.5px)/2)}
.pres15disponibilite{grid-template-columns:1fr;row-gap:2.5rem}
.pres15disponibilite > .chapeau,.pres15disponibilite > .col1,.pres15disponibilite > .col2{grid-column:1;grid-row:auto}
.pres19etapes > .col{flex:0 0 100%}
.pres18axes > .col{flex:0 0 50%}
.pres15forme,.pres15forme.inverse{grid-template-columns:1fr}
.pres15forme > .chapeau{grid-row:auto}
.pres15forme > .col1,.pres15forme > .col2,
.pres15forme.inverse > .col1,.pres15forme.inverse > .col2{grid-column:1;grid-row:auto}
.pres15forme > .col2{min-height:380px;border-top:0}
.pres15forme.inverse > .col2{order:-1}
.pres19formats > .col{flex:0 0 100%}
.pres15illustration{grid-template-columns:1fr;row-gap:2.5rem}
.pres15illustration > .chapeau,.pres15illustration > .col1,.pres15illustration > .col2{grid-column:1;grid-row:auto}
.pres15illustration > .col1{order:-1}
.pres34principes{grid-template-columns:1fr;column-gap:0}
.pres34principes > .col1{grid-column:1;grid-row:2;margin-bottom:2rem}
.pres34principes > .col2,.pres34principes > .col3,.pres34principes > .col4,
.pres34principes > .col5,.pres34principes > .col6{grid-column:1}
.pres34principes > .col2{grid-row:3}
.pres34principes > .col3{grid-row:4}
.pres34principes > .col4{grid-row:5}
.pres34principes > .col5{grid-row:6}
.pres34principes > .col6{grid-row:7}
.pres19equipe > .col{flex:0 0 100%}
.pres18statsclair > .col{flex:0 0 50%}
.pres34prestation{grid-template-columns:1fr;column-gap:0;row-gap:0}
.pres34prestation > .col1{grid-column:1;grid-row:2;margin-bottom:3rem}
.pres34prestation > .col2,.pres34prestation > .col3,.pres34prestation > .col4,
.pres34prestation > .col5,.pres34prestation > .col6{grid-column:1}
.pres34prestation > .col2{grid-row:3}
.pres34prestation > .col3{grid-row:4}
.pres34prestation > .col4{grid-row:5}
.pres34prestation > .col5{grid-row:6}
.pres34prestation > .col6{grid-row:7}
.pres15apercu{grid-template-columns:1fr;row-gap:2.5rem}
.pres15apercu > .chapeau,.pres15apercu > .col1,.pres15apercu > .col2{grid-column:1;grid-row:auto}
.pres34sommaire > .col{flex:0 0 50%}
.pres18marqueblanche > .col{flex:0 0 calc(50% - .75rem)}
.pres15independance{grid-template-columns:1fr;row-gap:2.5rem}
.pres15independance > .chapeau,.pres15independance > .col1,.pres15independance > .col2{grid-column:1;grid-row:auto}
.pres18axes > .col + .col{border-left:0}
.pres18axes > .col:nth-child(odd){border-left:0}
.pres18axes > .col{box-shadow:0 0 0 .75px rgba(201,168,76,.15)}
.pres15acces{grid-template-columns:1fr;row-gap:2.5rem}
.pres15acces > .chapeau,.pres15acces > .col1,.pres15acces > .col2{grid-column:1;grid-row:auto}
.pres32personnalisation{grid-template-columns:1fr 1fr}
.pres32personnalisation > .chapeau,.pres32personnalisation > .col1{grid-column:1/-1;grid-row:auto;padding-right:0}
.pres32personnalisation > .col2,.pres32personnalisation > .col3,
.pres32personnalisation > .col4,.pres32personnalisation > .col5{grid-column:auto;grid-row:auto}
}
@media(max-width:943px){
.rowH > .containerA{gap:.8rem}
.rowH .c3{gap:.4rem}
.rowH .c3 .btn-entete{padding:.34rem .6rem;font-size:.72rem;letter-spacing:.04em}
a.menu-mobile{
display:block;width:28px;height:var(--hauteur-entete);
text-decoration:none;position:relative;
}
a.menu-mobile::before,a.menu-mobile::after,a.menu-mobile span{display:none}
a.menu-mobile::before{
content:'';display:block;position:absolute;top:50%;left:0;
width:28px;height:2px;margin-top:-1px;background:var(--gold);
box-shadow:0 -8px 0 var(--gold),0 8px 0 var(--gold);
}
/* le JS pose height et width en style inline sur ce ul */
nav.menu > ul{
display:none;position:absolute;left:0;top:var(--hauteur-entete);
width:100%;flex-direction:column;align-items:stretch;gap:0;
padding:0 var(--gutter) 2rem;overflow-y:auto;
background:rgba(15,30,53,.99);border-top:1px solid rgba(201,168,76,.2);
}
nav.menu > ul.show-on-mobile{display:flex}
nav.menu > ul > li{border-bottom:1px solid rgba(255,255,255,.07)}
nav.menu > ul > li > span{display:flex;align-items:center;justify-content:space-between}
nav.menu > ul > li > span > a{flex:1 1 auto;height:auto;white-space:normal;line-height:1.3;padding:.72rem 0;font-size:.95rem}
/* en mobile l'ouverture ne se fait plus au survol mais par la classe mFlip,
posee par le bouton + de megamenuv4.js */
nav.menu > ul > li:hover > ul{display:none}
nav.menu > ul > li.mFlip > ul{display:flex}
nav.menu > ul > li > ul{
position:static;display:none;flex-direction:column;
min-width:0;padding:0 0 .8rem;background:none;border:0;
}
nav.menu > ul > li > ul > li.col{padding:0}
nav.menu > ul > li > ul > li.col + li.col{border-left:0}
nav.menu > ul > li > ul li a{padding:.55rem 0 .55rem 1rem}
/* bouton + : ouvre le sous-menu sans suivre le lien du libelle */
nav.menu > ul > li > span > .ouvre{
flex:0 0 auto;display:grid;place-items:center;
width:2.2rem;height:2.2rem;margin-left:.5rem;cursor:pointer;
color:var(--gold);font-size:1.35rem;line-height:1;font-weight:300;
border:1px solid rgba(201,168,76,.35);border-radius:2px;
-webkit-user-select:none;user-select:none;
}
nav.menu > ul > li > span > .ouvre::before{content:'+'}
nav.menu > ul > li.mFlip > span > .ouvre::before{content:'\2212'} /* signe moins */
/* le chevron du JS n'a plus lieu d'etre en mobile */
nav.menu > ul > li.menu-dropdown-icon > span > a::after{display:none}
}
@media(max-width:640px){
:root{--gutter:1.5rem;--secpad:3.5rem}
.rowH .c3 .btn-entete{padding:.3rem .5rem;font-size:.66rem}
.rowF1 > .containerA{grid-template-columns:1fr;gap:2rem}
.rowF2 > .containerA{justify-content:flex-start}
.rowF2 .footc2{margin-left:0}
.rowgrphero{padding:8rem 0 3rem;min-height:auto}
.pres18chiffresor{padding:2rem var(--gutter)}
.pres18chiffresor > .col{flex:0 0 100%}
.pres18audience > .col{flex:0 0 100%}
.pres100autresprestations .col{flex:0 0 100%}
.pres100profils .col{flex:0 0 100%}
.pres100espace .col{flex:0 0 100%}
.rowespace{padding:3rem 0 4rem}
.pres15plateformes{grid-template-columns:1fr}
.pres18axes > .col{flex:0 0 100%}
.pres18modalites > .col{flex:0 0 100%}
.pres34sommaire > .col{flex:0 0 100%}
.pres18marqueblanche > .col{flex:0 0 100%}
.pres18statsclair > .col{flex:0 0 100%}
.pres15publics > .col{flex:0 0 100%}
.pres18modalites .txt{grid-template-columns:1fr}
.pres18modalites > .col .ico{grid-row:1;margin-bottom:1rem}
.pres18modalites > .col .tag{grid-column:1;grid-row:2}
.pres18modalites > .col .tc2{grid-column:1;grid-row:3}
.pres32personnalisation{grid-template-columns:1fr}
.pres19cta{padding:2.5rem 0}
.pres19cta > .col{flex:0 0 100%}
/* --- page d'accueil ---------------------------------------------------- */
.pres1bandeaunouveau > .coltexte{padding:.7rem 1rem;font-size:.82rem}
.pres1bandeaunouveau .tc1{font-size:1rem}
.pres100prestationsaccueil > .grille{grid-template-columns:1fr}
.pres100prestationsaccueil > .grille > .col:last-child{grid-column:auto}
.pres100prestationsaccueil > .grille > .col:last-child .intcol{padding:2rem 1.5rem;min-height:auto}
.pres18metriques{grid-template-columns:1fr}
.pres5entetesection{grid-template-columns:1fr}
.pres5mediasaccueil{grid-template-columns:1fr}
.pres5mediasaccueil .enteteAC{grid-column:1;grid-row:2;justify-self:start}
.pres5mediasaccueil .groupAC{grid-column:1;grid-row:3;grid-template-columns:1fr}
.pres5mediasaccueil > .readmore{grid-row:4}
.pres5mediasaccueil .filtreAC{width:100%;overflow-x:auto}
.pres18clients > .col{flex:0 0 100%;max-width:none;border-right:1px solid var(--grey-light);border-bottom:none}
.pres18clients > .col:last-child{border-bottom:1px solid var(--grey-light)}
/* liste des medias : une seule colonne, et la barre d'onglets prend toute
la largeur en gardant son defilement horizontal */
.rowmedias{padding:3rem 0 4rem}
.pres5medias .groupAC{grid-template-columns:1fr}
.pres5medias .filtreAC{width:100%}
.presAC .texteAC{padding:1.25rem}
}